add: 项目初步完成，未完成组件化配置

ruoyi-ui/.env.development

@@ -1,11 +1,11 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
+VUE_APP_TITLE = 遥控器后台管理系统
 
 # 开发环境配置
 ENV = 'development'
 
-# 若依管理系统/开发环境
-VUE_APP_BASE_API = '/dev-api'
+# 黑龙江移动线上渠道管理系统/开发环境
+VUE_APP_BASE_API = 'http://192.168.31.50:8080'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

ruoyi-ui/.env.staging

@@ -1,10 +1,8 @@
 # 页面标题
-VUE_APP_TITLE = 若依管理系统
-
-NODE_ENV = production
+VUE_APP_TITLE = 遥控器后台管理系统
 
 # 测试环境配置
 ENV = 'staging'
 
 # 若依管理系统/测试环境
-VUE_APP_BASE_API = '/stage-api'
+VUE_APP_BASE_API = 'http://admin.info666.com/api'

ruoyi-ui/package.json

@@ -1,8 +1,8 @@
 {
   "name": "ruoyi",
   "version": "3.8.6",
-  "description": "若依管理系统",
-  "author": "若依",
+  "description": "遥控器后台管理系统",
+  "author": "遥控器",
   "license": "MIT",
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -40,6 +40,7 @@
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
+    "dayjs": "^1.11.9",
     "echarts": "5.4.0",
     "element-ui": "2.15.13",
     "file-saver": "2.0.5",
@@ -55,6 +56,7 @@
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.5.5",
+    "vue-grid-layout": "^2.4.0",
     "vue-meta": "2.4.0",
     "vue-router": "3.4.9",
     "vuedraggable": "2.24.3",

ruoyi-ui/src/api/base/addBase/index.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export class AddBaseApi {
+  getList = (data={})=>{
+    return  request({
+        url: '/platform/v1/base/list',
+        method: 'post',
+        data: data
+    })
+  }
+
+  getAllList = (data={})=>{
+    return  request({
+        url: '/platform/v1/base/allList',
+        method: 'post',
+        data: data
+    })
+  }
+
+  configAddOrEdit = (data={})=>{
+    return  request({
+        url: '/platform/v1/base/addOrUpdate',
+        method: 'post',
+        data: data
+    })
+  }
+
+  configDetail = (data={})=>{
+    return  request({
+        url: '/platform/v1/base/getInfo',
+        method: 'post',
+        data: data
+    })
+  }
+
+  configDelete = (data={})=>{
+    return  request({
+        url: '/platform/v1/base/delete',
+        method: 'post',
+        data: data
+    })
+  }
+}
+
+export const addBaseApi = new AddBaseApi()

ruoyi-ui/src/api/code/index.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+export class CodeApi {
+  getList = (data={})=>{
+    return  request({
+        url: '/platform/v1/qr/list',
+        method: 'post',
+        data: data
+    })
+  }
+
+  configAddOrEdit = (data={})=>{
+    return  request({
+        url: '/platform/v1/qr/addOrUpdate',
+        method: 'post',
+        data: data
+    })
+  }
+
+  configDetail = (data={})=>{
+    return  request({
+        url: '/platform/v1/qr/getInfo',
+        method: 'post',
+        data: data
+    })
+  }
+
+  configDelete = (data={})=>{
+    return  request({
+        url: '/platform/v1/qr/delete',
+        method: 'post',
+        data: data
+    })
+  }
+}
+
+export const codeApi = new CodeApi()

ruoyi-ui/src/api/template/addButton/index.js

@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+export class AddButtonApi {
+  getList = (data={})=>{
+    return  request({
+        url: '/platform/v1/components/list',
+        method: 'post',
+        data: data
+    })
+  }
+
+  getAllList = (data={})=>{
+    return  request({
+        url: '/platform/v1/components/allList',
+        method: 'post',
+        data: data
+    })
+  }
+
+  configAddOrEdit = (data={})=>{
+    return  request({
+        url: '/platform/v1/components/addOrUpdate',
+        method: 'post',
+        data: data
+    })
+  }
+
+  configDetail = (data={})=>{
+    return  request({
+        url: '/platform/v1/components/getInfo',
+        method: 'post',
+        data: data
+    })
+  }
+
+  configDelete = (data={})=>{
+    return  request({
+        url: '/platform/v1/components/delete',
+        method: 'post',
+        data: data
+    })
+  }
+}
+
+export const addButtonApi = new AddButtonApi()

ruoyi-ui/src/api/template/addTemplate/index.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+export class AddTemplateApi {
+  getList = (data={})=>{
+    return  request({
+        url: '/platform/v1/template/list',
+        method: 'post',
+        data: data
+    })
+  }
+
+  configAddOrEdit = (data={})=>{
+    return  request({
+        url: '/platform/v1/template/addOrUpdate',
+        method: 'post',
+        data: data
+    })
+  }
+
+  configDetail = (data={})=>{
+    return  request({
+        url: '/platform/v1/template/getInfo',
+        method: 'post',
+        data: data
+    })
+  }
+
+  configDelete = (data={})=>{
+    return  request({
+        url: '/platform/v1/template/delete',
+        method: 'post',
+        data: data
+    })
+  }
+}
+
+export const addTemplateApi = new AddTemplateApi()

ruoyi-ui/src/baseComponents/f-btn/index.vue

@@ -0,0 +1,52 @@
+<!--
+ * @Author: fhj
+ * @LastEditors: 傅豪杰 18516149270@163.com
+ * @Description: 按钮组件
+-->
+<template>
+  <el-button
+    :type="btnType"
+    v-bind="$attrs"
+    class="f-button"
+    :class="type"
+    v-on="$listeners"
+  >
+    <slot />
+  </el-button>
+</template>
+
+<script>
+export default {
+  name: 'FBtn',
+  props: {
+    type: {
+      type: String,
+      default: 'primary'
+    }
+  },
+  data() {
+    return {
+      // 特殊类型
+      btnTyleList: [
+        'delete', 'reset', 'link-text'
+      ]
+    };
+  },
+  computed: {
+    btnType() {
+      if (this.btnTyleList.includes(this.type)) {
+        return 'text';
+      }
+      return this.type;
+    }
+  },
+  methods: {}
+};
+</script>
+<style lang="scss" scoped>
+.f-button{
+  &.delete{
+    color: #ed5565;;
+  }
+}
+</style>

ruoyi-ui/src/baseComponents/f-btn/readme.md

@@ -0,0 +1,62 @@
+<!--
+ * @Author: fhj
+ * @LastEditors: fhj
+ * @Description: 
+-->
+# Btn 按钮
+
+用于本项目所有主要、次要、删除按钮。
+
+## Btn Attributes
+
+| 参数           | 说明                             | 类型    | 可选值                     | 默认值                             |
+| -------------- | -------------------------------- | ------- | -------------------------- | ---------------------------------- |
+| type          | 按钮类型                     | String  | `primary`/`info`/`delete`  /`reset` / `link`  /`reject` /`link-text`                       | `primary`                               |
+| attr  | 支持el-button所有属性                | Any  | -                          |                       |
+
+> `type`为`delete`时为删除样式按钮\
+> `type`为`reset`时为重置样式按钮\
+> `type`为`primary`时为深蓝色主要功能按钮\
+> `type`为`info`时为灰色次要按钮\
+> `type`为`text`时为字体含背景按钮\
+> `type`为`link-text`时为字体按钮\
+> `type`为`reject`时为红色背景警告按钮\
+
+## Demo
+
+### 基本用法
+
+```html
+<template>
+    <f-btn>确认</f-btn>
+    <f-btn type="info">取消</f-btn>
+    <f-btn type="reject">驳回</f-btn>
+    <f-btn type="delete">删除</f-btn>
+    <f-btn type="reset">重置</f-btn>
+    <f-btn type="text">文字背景</f-btn>
+    <f-btn type="link-text">文字</f-btn>
+    
+    <br>
+    <br>
+
+    <!-- 禁用状态 -->
+    <f-btn disabled>确认</f-btn>
+    <f-btn type="info" disabled>取消</f-btn>
+    <f-btn type="reject" disabled>驳回</f-btn>
+    <f-btn type="delete" disabled>删除</f-btn>
+    <f-btn type="reset" disabled>重置</f-btn>
+    <f-btn type="text" disabled>文字背景</f-btn>
+    <f-btn type="link-text" disabled>文字</f-btn>
+
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        
+      };
+    }
+  };
+</script>
+<!-- btn-basic-usage.vue -->
+```

ruoyi-ui/src/baseComponents/f-checkbox/index.vue

@@ -0,0 +1,108 @@
+<!--
+ * @Author: gaoshoujun gaosj@yueworld.cn
+ * @Date: 2022-06-28 11:00:24
+ * @LastEditors: 傅豪杰 18516149270@163.com
+ * @LastEditTime: 2023-05-12 17:05:08
+-->
+<template>
+  <!-- 全选 -->
+  <div>
+    <el-checkbox
+      v-if="hasCheckAll"
+      class="f-checkbox"
+      v-model="checkAllData"
+      v-bind="$attrs"
+      :disabled="isDisabled"
+      :indeterminate="currentValue.length>0&&currentValue.length<list.length"
+      @change="handleCheckAllChange"
+    >
+      全选
+    </el-checkbox>
+    <el-checkbox-group
+      v-bind="$attrs"
+      v-model="currentValue"
+      @change="handleChange"
+      :disabled="isDisabled"
+    >
+      <el-checkbox
+        v-for="(item, index) in list"
+        class="f-checkbox"
+        :key="'checkbox' + index"
+        :label="item[listKey]"
+      >
+        {{ item[listName] }}
+      </el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+<script>
+import formMixins from'../../mixins/formMixins.js'
+export default {
+  name: 'FCheckbox',
+  mixins:[formMixins],
+  data() {
+    return {
+      checkAll: false
+    };
+  },
+  props:{
+    value: {}, // 绑定的数据
+
+    // 渲染的options
+    list:{
+      type:Array,
+      default:()=>[]
+    },
+    // 选项value
+    listKey:{
+      type:String,
+      default:'value'
+    },
+    // 选项name
+    listName:{
+      type:String,
+      default:'name'
+    },
+    // 是否有全选
+    hasCheckAll:{
+      type:Boolean,
+      default:false
+    }
+  },
+  computed: {
+    currentValue:{
+      get(){
+        return this.value || []
+      },
+      set(val){
+        this.$emit('input',val)
+      }
+    },
+    checkAllData: {
+      get() {
+        // 监听是否权限
+        if (this.currentValue.length === this.list.length) {
+          return true;
+        }
+        if (this.currentValue.length === 0) {
+          return false;
+        }
+        return this.checkAll;
+      },
+      set(value) {
+        this.checkAll = value;
+      }
+    }
+  },
+  methods: {
+    handleCheckAllChange(val) {
+      const list = this.list.map(item => item[this.listKey]);
+      this.$emit('input',val ? list : [])
+    },
+    // change事件
+    handleChange(val){
+      this.$emit('change',val)
+    }
+  }
+};
+</script>

ruoyi-ui/src/baseComponents/f-checkbox/readme.md

@@ -0,0 +1,70 @@
+<!--
+ * @Author: fhj
+ * @LastEditors: fhj
+ * @Description: 
+-->
+# Checkbox 多选组件
+
+Checkbox 多选
+
+
+## Checkbox Attributes
+
+| 参数          | 说明                                            | 类型    | 可选值     | 默认值  |
+| ------------- | ----------------------------------------------- | ------- | ---------- | ------- |
+| v-model          | 双向绑定数据                                    | String/Number  | -          | ''       |
+| disabled     | disabled状态，可以传Fn                  | Function,Boolean | -        | `false`  |
+| list     | 可选项数组                   | Array | -        |`[]` |
+| listName     | 展示用name                   | String | -        |`name` |
+| listkey     | 选项key                   | String | -        |`value` |
+| hasCheckAll     | 是否有全选                   | Boolean | -        |`false` |
+| attrs         | 其他跟el-radio一致                      | Any     |            |
+
+> 其他与el-radio所有操作一样
+
+
+
+
+## Checkbox Events
+
+| 事件名称 | 说明                 | 回调参数                                                                        |
+| -------- | -------------------- | -------------------------------------- |
+| change   | 值发生改变时触发 | value |
+
+## Demo
+
+### 基本用法
+
+```html
+<template>
+  <div class="test">
+      <f-checkbox :list="list" v-model="checkbox" hasCheckAll disabled ></f-checkbox>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Checkbox',
+  data() {
+    return {
+      list:[
+        {
+          name:'checkbox1',
+          value:'checkbox1'
+        },
+        {
+          name:'checkbox2',
+          value:'checkbox2'
+        }
+      ],
+      checkbox:[]
+    };
+  },
+  methods:{
+  }
+};
+</script>
+
+
+<!-- checkbox-basic-usage.vue -->
+```

ruoyi-ui/src/baseComponents/f-datePicker/index.vue

@@ -0,0 +1,111 @@
+<!--
+ * @Author: gaoshoujun gaosj@yueworld.cn
+ * @Date: 2022-06-24 17:16:58
+ * @LastEditors: 傅豪杰 18516149270@163.com
+ * @LastEditTime: 2023-05-18 16:55:01
+-->
+<template>
+   <el-date-picker
+      v-bind="$attrs"
+      v-model="currentValue"
+      :disabled="isDisabled"
+      :type="type"
+      width='100%'
+      :range-separator="$attrs.rangeSeparator||'～'"
+      :start-placeholder="$attrs.startPlaceholder || '开始日期'"
+      :end-placeholder="$attrs.endPlaceholder || '结束日期'"
+      class="f-el-date"
+      :class="{hours:$attrs.dateType==='hours'}"
+      :value-format="getValueFormat"
+      :format="getFormat"
+      :placeholder="$attrs.placeholder || '选择日期'"
+      prefix-icon="none"
+      :editable="false"
+      @change="handleChange"
+      @blur="handleBlur"
+      @focus="handleFocus"
+    />
+</template>
+
+<script>
+import formMixins from'../../mixins/formMixins.js'
+
+export default {
+  name: 'FDatePicker',
+  mixins:[formMixins],
+  inheritAttrs: false,
+  props: {
+      // 绑定的数据
+    value: {},
+    // 当前行下表
+    index: {
+      type: [String, Number],
+      default: ''
+    },
+    // 类型
+    type:{
+      type:String,
+      default:'date'
+    },
+    // 格式化数据
+    valueFormat:{
+      type:String,
+      default:'yyyy-MM-dd'
+    },
+  },
+  data() {
+    return {
+    };
+  },
+  computed:{
+    // 组件内数据
+    currentValue:{
+      get(){
+        return this.value || ''
+      },
+      set(val){
+        this.$emit('input',val)
+      }
+    },
+    // 数据值格式
+    getValueFormat(){
+      if(this.type === 'year'){
+        return 'yyyy'
+      }
+      if(this.type === 'month'){
+        return 'yyyy-MM'
+      }
+      return this.valueFormat
+    },
+    // 显示格式
+    getFormat() {
+      if (this.$attrs.format) {
+        return this.$attrs.format
+      }
+      return this.getValueFormat
+    }
+  },
+  methods: {
+    clearDate() {
+      this.$emit('input', '')
+      this.$emit('change', '')
+      this.$emit('clear', '')
+    },
+    handleChange(val){
+      this.$emit('change',val)
+    },
+    handleBlur(val){
+      this.$emit('blur',this.currentValue)
+    },
+    handleFocus(val){
+      this.$emit('focus',this.currentValue)
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.el-date-editor--daterange.el-input__inner,.el-date-editor.el-input, .el-date-editor.el-input__inner{
+  width: 100%;
+}
+
+</style>

ruoyi-ui/src/baseComponents/f-datePicker/readme.md

@@ -0,0 +1,82 @@
+# DatePicker 日期组件
+
+DatePicker 日期组件
+
+## Attributes
+
+| 参数        | 说明          | 类型    | 可选值                       | 默认值       |
+| ----------- | ------------- | ------- | ---------------------------- | ------------ |
+| v-model     | 双向绑定数据  | String  | -                            | ''           |
+| disabled    | disabled 状态 | Boolean | -                            | `false`      |
+| type        | 日期类型      | String  | year、date、month、daterange | `date`       |
+| valueFormat | 格式化数据    | String  | -                            | 'yyyy-MM-dd' |
+| format      | 显示格式      | String  | -                            | 'yyyy-MM-dd' |
+
+若 format 参数有值，则按照其值的格式显示日期，为空时，展示的格式则 type 的类型影响，具体如下：
+
+| 类型值 | 显示示例   |
+| ------ | ---------- |
+| year   | 2022       |
+| month  | 2022-07    |
+| date   | 2022-07-08 |
+
+## Events
+
+| 事件名称 | 说明             | 回调参数 |
+| -------- | ---------------- | -------- |
+| change   | 值发生改变时触发 | value    |
+| focus    | 聚焦时触发       | -        |
+| blur     | 失去焦点时触发   | -        |
+
+## Demo
+
+### 基本用法
+
+```html
+<template>
+  <div class="demo">
+    <f-date-picker type="year" placeholder="请选择年份" v-model="year"></f-date-picker>
+    <f-date-picker type="year" placeholder="只读模式" v-model="year" format="yyyy年" readonly></f-date-picker>
+    <f-date-picker type="year" placeholder="禁用模式" v-model="year" disabled></f-date-picker>
+
+    <f-date-picker type="month" placeholder="请选择月份" v-model="month"></f-date-picker>
+    <f-date-picker type="month" placeholder="月份不可操作" v-model="month" readonly></f-date-picker>
+    <f-date-picker type="month" placeholder="月份不可操作" v-model="month" disabled ></f-date-picker>
+    <f-date-picker type="month" placeholder="请选择月份" v-model="month" format="MM月"></f-date-picker>
+    <f-date-picker type="month" placeholder="请选择月份" v-model="month" format="M月"></f-date-picker>
+    <f-date-picker type="month" placeholder="请选择月份" v-model="month" format="yyyy年M月"></f-date-picker>
+
+    <f-date-picker type="date" placeholder="请选择日期" v-model="date"></f-date-picker>
+    <f-date-picker type="date" placeholder="请选择日期" v-model="date" readonly></f-date-picker>
+    <f-date-picker type="date" placeholder="请选择日期" v-model="date" disabled ></f-date-picker>
+
+    <f-date-picker type="daterange" placeholder="请选择日期" v-model="daterange"></f-date-picker>
+    <f-date-picker type="daterange" placeholder="请选择日期" v-model="daterange" disabled></f-date-picker>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DatePickerDemo',
+  data(){
+    return {
+      year:'',
+      month:'',
+      date:'',
+      daterange:[]
+    };
+  },
+  methods:{
+    change:function(val){
+      console.log('change',val);
+    },
+    blur:function(val){
+      console.log('blur',val);
+    },
+    focus:function(val){
+      console.log('focus',val);
+    }
+  }
+};
+</script>
+```

ruoyi-ui/src/baseComponents/f-dialog/index.vue

@@ -0,0 +1,101 @@
+<!--
+ * @Author: 傅豪杰 18516149270@163.com
+ * @Date: 2023-04-19 13:46:24
+ * @LastEditors: 傅豪杰 18516149270@163.com
+ * @LastEditTime: 2023-05-18 11:20:42
+ * @FilePath: /online-manager-front/src/baseComponents/f-dialog/index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <span @click.stop="show">
+    <slot />
+    <el-dialog
+      class="f-dialog"
+      v-bind="$attrs"
+      append-to-body
+      :visible="visible || dialogVisible"
+      :top="top"
+      :close-on-click-modal="false"
+      :width="width"
+      :destroy-on-colse="true"
+      v-on="$listeners"
+      @close="onCancel"
+    >
+      <slot name="contain" />
+      <!-- 需要自带按钮 -->
+      <template v-if="showFooter&&!$scopedSlots.btn">
+        <div slot="footer" class="btn-selection">
+          <f-btn v-if="isDetermine" class="mr-12" @click="ok">{{ determineTitle }}</f-btn>
+          <f-btn v-if="isCancel" type="info" @click="onCancel">{{ cancelTitle }}</f-btn>
+        </div>
+      </template>
+      <!-- 不需要自带按钮 -->
+      <template v-if="showFooter&&$scopedSlots.btn" slot="footer">
+        <slot name="btn" />
+      </template>
+    </el-dialog>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'FDialog',
+  props: {
+    dialogVisible: { type: Boolean, default: false },
+    isClose: { type: Boolean, default: true }, // 是否需要右上角关闭按钮
+    isDetermine: { type: Boolean, default: true }, // 是否需要确定按钮
+    isCancel: { type: Boolean, default: true }, // 是否需要取消按钮
+    width: { type: String, default: '700px' }, // 弹窗宽度
+    top: { type: String, default: '5%' }, // 弹窗距离顶部距离
+    determineTitle: { type: String, default: '确认' }, // 保存按钮文字
+    cancelTitle: { type: String, default: '取消' }, // 取消按钮文字
+    showFooter: { type: Boolean, default: true }, // 是否显示按钮
+    contentPaddingBottom: { type: String, default: '30px' }, // 主要内容底边距
+    // 初始化方法
+    initData:{
+      type:Function,
+      default:function(){}
+    },
+    /**
+     *  关闭之前回调方法 
+     *  type:ok/cancel  表示是点击确定还是取消按钮
+     **/ 
+    beforeClose:{
+      type:Function,
+      default:function(type){
+        return true;
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false
+    };
+  },
+  methods: {
+    // 点击右上角关闭按钮
+    async onCancel() {
+      const isClose = await this.beforeClose('cancel')
+      if(!isClose) return;
+      this.visible = false;
+      this.$emit('cancel');
+    },
+    // 点击确定按钮
+    async ok() {
+      const isClose = await this.beforeClose('ok')
+      if(!isClose) return;
+      this.visible = false;
+      this.$emit('ok');
+    },
+    // 显示
+    show() {
+      this.initData();
+      this.visible = true;
+    },
+    // 隐藏
+    hide(){
+      this.onCancel()
+    },
+  }
+};
+</script>

ruoyi-ui/src/baseComponents/f-dialog/readme.md

@@ -0,0 +1,90 @@
+# Dialog 弹窗组件
+
+弹窗组件
+
+## Dialog Attributes
+
+| 参数           | 说明                                  | 类型                    | 可选值 | 默认值  |
+| -------------- | ------------------------------------- | ----------------------- | ------ | ------- |
+| isDetermine    | 是否需要确定按钮                      | Boolean                 | -      | `true`  |
+| isCancel       | 是否需要取消按钮                      | Boolean                 | -      | `true`  |
+| top            | 弹窗距离顶部距离                      | String                  | -      | `5%`    |
+| determineTitle | 确认按钮文字                          | String                  | -      | `确认`  |
+| cancelTitle    | 取消按钮文字                          | String                  | -      | `取消`  |
+
+## Dialog Events
+
+| 事件名称    | 说明                              | 回调参数 |
+| ----------- | --------------------------------- | -------- |
+| cancel      | 弹窗关闭事件                      | 无       |
+| ok          | 弹窗关闭事件 确认操作             | 无       |
+| closeDialog | external 为 true 时触发，关闭弹窗 | 无       |
+
+## Demo
+
+### 基本用法
+
+```html
+<template>
+  <f-dialog :title="'新增'" :out-close="outClose" @cancel="closeDialog">
+    <!-- 默认slot点击时打开弹窗 -->
+    <f-btn class="mr-8">新增</f-btn>
+    <!-- 弹窗表格 -->
+    <template #contain>
+      弹窗内容
+    </template>
+    <!-- 弹窗按钮 -->
+    <template #btn>
+      <div class="text-right" @click="preservation">
+        <f-btn>保存</f-btn>
+      </div>
+    </template>
+  </f-dialog>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+          outClose:true
+      }
+    },
+    methods: {
+      closeDialog() {
+        
+      },
+      handleVisible(){
+        
+      }
+    }
+  }
+</script>
+```
+
+### 外部控制用法
+
+```html
+<template>
+    <f-btn @click="$refs.dialog.show()">点我打开外置弹窗</f-btn>
+    <f-dialog ref="dialog">
+        <template #contain>
+            <f-btn @click="$refs.dialog.hide()">点我关闭</f-btn>
+        </template>
+    </f-dialog>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+      }
+    },
+    methods: {
+      closeDialog() {
+        
+      },
+      handleVisible(){
+        
+      }
+    }
+  }
+</script>
+```

ruoyi-ui/src/baseComponents/f-fileUpload/index.vue

@@ -0,0 +1,243 @@
+<template>
+    <div class="upload-file">
+      <el-upload
+        v-bind="$attrs"
+        multiple
+        :action="uploadFileUrl"
+        :before-upload="handleBeforeUpload"
+        :file-list="fileList"
+        :limit="limit"
+        :on-error="handleUploadError"
+        :on-exceed="handleExceed"
+        :on-success="handleUploadSuccess"
+        :show-file-list="false"
+        :headers="headers"
+        :data="paramsData"
+        class="upload-file-uploader"
+        ref="fileUpload"
+      >
+        <!-- 上传按钮 -->
+        <el-button size="mini" type="primary">选取文件</el-button>
+        <!-- 上传提示 -->
+        <div class="el-upload__tip" slot="tip" v-if="showTip">
+          请上传
+          <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+          <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+          的文件
+        </div>
+      </el-upload>
+  
+      <!-- 文件列表 -->
+      <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
+        <li :key="file.url" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
+          
+          <el-image 
+            v-if="isImage" 
+            :src="getImgUrl(file.url)" 
+            :preview-src-list="[getImgUrl(file.url)]"
+            style="max-width:200px"
+          ></el-image>
+
+          <el-link v-else :href="getImgUrl(file.url)" :underline="false" target="_blank">
+            <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
+          </el-link>
+          <div class="ele-upload-list__item-content-action">
+            <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
+          </div>
+        </li>
+      </transition-group>
+    </div>
+  </template>
+  
+  <script>
+  import { getToken } from "@/utils/auth";
+  
+  export default {
+    name: "FFileUpload",
+    props: {
+      // 值
+      value: [String, Object, Array],
+      // 数量限制
+      limit: {
+        type: Number,
+        default: 5,
+      },
+      // 大小限制(MB)
+      fileSize: {
+        type: Number,
+        default: 5,
+      },
+      // 文件类型, 例如['png', 'jpg', 'jpeg']
+      fileType: {
+        type: Array,
+        default: () => ['png', 'jpg', 'jpeg'],
+      },
+      // 是否显示提示
+      isShowTip: {
+        type: Boolean,
+        default: true
+      },
+      // 是否为图片
+      isImage:{
+        type:Boolean,
+        default:true
+      },
+      paramsData: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        number: 0,
+        uploadList: [],
+        baseUrl:process.env.VUE_APP_FILE_STATIC,
+        uploadFileUrl: process.env.VUE_APP_BASE_API + "/interface/admin/file/upload", // 上传文件服务器地址
+        headers: {
+          Authorization: "Bearer " + getToken(),
+        },
+        fileList: [],
+      };
+    },
+    watch: {
+      value: {
+        handler(val) {
+          if (val) {
+            let temp = 1;
+            // 首先将值转为数组
+            const list = Array.isArray(val) ? val : this.value.split(',');
+            // 然后将数组转为对象数组
+            this.fileList = list.map(item => {
+              if (typeof item === "string") {
+                item = { name: item, url: item };
+              }
+              item.uid = item.uid || new Date().getTime() + temp++;
+              return item;
+            });
+          } else {
+            this.fileList = [];
+            return [];
+          }
+        },
+        deep: true,
+        immediate: true
+      }
+    },
+    computed: {
+      // 是否显示提示
+      showTip() {
+        return this.isShowTip && (this.fileType || this.fileSize);
+      },
+    },
+    methods: {
+      // 获取图片url
+      getImgUrl(path){
+        if(path.indexOf('http')==0){
+          return path
+        }
+        return this.baseUrl+path
+      },
+      // 上传前校检格式和大小
+      handleBeforeUpload(file) {
+        // 校检文件类型
+        if (this.fileType) {
+          const fileName = file.name.split('.');
+          const fileExt = fileName[fileName.length - 1];
+          const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
+          if (!isTypeOk) {
+            this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
+            return false;
+          }
+        }
+        // 校检文件大小
+        if (this.fileSize) {
+          const isLt = file.size / 1024 / 1024 < this.fileSize;
+          if (!isLt) {
+            this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
+            return false;
+          }
+        }
+        this.$modal.loading("正在上传文件，请稍候...");
+        this.number++;
+        return true;
+      },
+      // 文件个数超出
+      handleExceed() {
+        this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+      },
+      // 上传失败
+      handleUploadError(err) {
+        this.$modal.msgError("上传文件失败，请重试");
+        this.$modal.closeLoading()
+      },
+      // 上传成功回调
+      handleUploadSuccess(res, file) {
+        if (res.code === 200) {
+          this.uploadList.push({ name: res.data.path, url: res.data.path });
+          this.uploadedSuccessfully();
+        } else {
+          this.number--;
+          this.$modal.closeLoading();
+          this.$modal.msgError(res.msg);
+          this.$refs.fileUpload.handleRemove(file);
+          this.uploadedSuccessfully();
+        }
+      },
+      // 删除文件
+      handleDelete(index) {
+        this.fileList.splice(index, 1);
+        this.$emit("input", this.listToString(this.fileList));
+      },
+      // 上传结束处理
+      uploadedSuccessfully() {
+        if (this.number > 0 && this.uploadList.length === this.number) {
+          setTimeout(()=>{
+            this.fileList = this.fileList.concat(this.uploadList);
+            this.uploadList = [];
+            this.number = 0;
+            this.$emit("input", this.listToString(this.fileList));
+            this.$modal.closeLoading();
+          },500)
+      
+        }
+      },
+      // 获取文件名称
+      getFileName(name) {
+        if (name.lastIndexOf("/") > -1) {
+          return name.slice(name.lastIndexOf("/") + 1);
+        } else {
+          return "";
+        }
+      },
+      // 对象转成指定字符串分隔
+      listToString(list, separator) {
+        let strs = "";
+        separator = separator || ",";
+        for (let i in list) {
+          strs += list[i].url + separator;
+        }
+        return strs != '' ? strs.substr(0, strs.length - 1) : '';
+      }
+    }
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  .upload-file-uploader {
+    margin-bottom: 5px;
+  }
+  .upload-file-list .el-upload-list__item {
+    border: 1px solid #e4e7ed;
+    line-height: 2;
+    margin-bottom: 10px;
+    position: relative;
+  }
+  .upload-file-list .ele-upload-list__item-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: inherit;
+  }
+  .ele-upload-list__item-content-action .el-link {
+    margin-right: 10px;
+  }
+  </style>

ruoyi-ui/src/baseComponents/f-form/index.vue

@@ -0,0 +1,273 @@
+<template>
+  <el-form 
+    ref="fForm" 
+    :key="update" 
+    :rules="rules" 
+    class="flex-wrap f-form" 
+    :class="text ? 'text' : ''"
+    :model="form"
+    :label-position="labelPosition">
+    <el-form-item
+      v-for="(item, index) in configList"
+      :key="'form-item' + index"
+      :ref="'formItem'+item.prop"
+      :label-width="setWidth(item, index)"
+      :label="item.label"
+      :prop="item.prop"
+      :style="{
+        width: !autoWidth
+          ? (item.span && colVal * item.span + '%') || colVal + '%'
+          : 'auto'
+      }"
+      class="pb-10 mb-8"
+      :class="getClass(item,index)"
+      :rules="item.rules"
+      :required="item.disabled ? false : item.required"
+    >
+      <div :style="{ width: item.width || itemWidth }">
+        <components
+          v-if="!item.hasSlot && item.itemType !== 'text' && item.itemType"
+          :is="'f-' + item.itemType"
+          v-model="form[item.prop]"
+          v-bind="{ disabled:formItemDisabled(item),...item.attrs }"
+          @change="handleEmit($event,item,'change')"
+          @blur="handleEmit($event,item,'blur')"
+          @focus="handleEmit($event,item,'focus')"
+        />
+        <span v-else-if="!item.hasSlot && item.itemType === 'text'" class="text-break-all" :class="(item.click?'f-cursor--pointer link-type':'') +(item.className || '')" @click="()=>{item.click && item.click(item,form)}">
+          {{
+            (item.formatter && item.formatter(form)) ||( formatter(item,form[item.prop]))
+          }}
+        </span>
+        <slot v-else v-bind="item" :name="item.prop" />
+        
+        <slot v-if="item.orderSlot" :name="item.orderSlot" /></slot>
+      </div>
+      <!-- label插槽 -->
+      <template v-if="item.hasLabelSlot" #label>
+        <template v-if="item.hasLabelSlot">
+          <slot v-bind="item" :name="item.prop + 'Label'" />
+        </template>
+      </template>
+    </el-form-item>
+    <el-form-item
+      v-if="$slots.default"
+      label-width="0px"
+      class="flex-auto slot"
+    >
+      <slot />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { formatNumber } from '../../utils/index';
+import formMixins from'../../mixins/formMixins.js'
+
+export default {
+  name: 'FForm',
+  mixins:[formMixins],
+  props: {
+    config: { type: Array, default: () => [] }, // 配置文件
+    form: {
+      type: Object,
+      default: () => {}
+    }, // 传进来的共享的form表单值对象
+    rules: { type: Object, default: () => ({}) }, // 传进来的共享的form验证规则
+    column: { type: Number, default: 4 }, // 总的col布局
+    itemWidth: { type: String, default: '100%' }, // form-item项的宽度
+    disabled: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: true },
+    // label位置
+    labelPosition: {
+      type: String,
+      default: 'top'
+    },
+    // 是否自动宽度
+    autoWidth: {
+      type: Boolean,
+      default: false
+    },
+    // 是否文字展示
+    text: {
+      type: Boolean,
+      default: false
+    },
+  },
+  data() {
+    return {
+      configdata: [],
+      update: 0
+    };
+  },
+  computed: {
+    // 组件内部config
+    configList() {
+      return this.config;
+    },
+    // 整体列数对应的col
+    colVal() {
+      return 100 / this.column;
+    },
+    labelWidth() {
+      // rowList每一行的数据，初始化的时候给一个二维数组，并制定第一个参数为new Array（）
+      // columnList每一列的数据
+      const rowList = [new Array(this.column)];
+      const columnList = [];
+      // count用来计算是否换行新增rowList的数组元素空数组，用来填补二维数组空位
+      // index代表的是rowList的当前操作项的下标
+      let count = 0;
+      let index = 0;
+      this.config.forEach((e, i, arr) => {
+        count += e.span || 1;
+        rowList[index][count - (e.span || 1)] = {
+          name: e.label || '',
+          prop: e.prop,
+          index: i
+        };
+        if (
+          count + ((arr[i + 1] || {}).span || 1) > this.column &&
+          arr[i + 1]
+        ) {
+          rowList.push(new Array(this.column));
+          index++;
+          count = 0;
+        }
+      });
+      // 行数据转列数据
+      rowList.forEach((e) => {
+        for (let i = 0; i < e.length; i++) {
+          if (!columnList[i]) {
+            columnList[i] = [];
+          }
+          columnList[i].push(e[i]);
+        }
+      });
+      // 取出每一列最大值nameLength
+      // 取出每一列的index下标
+      return columnList.map((e) => {
+        const nameLength = Math.max.apply(
+          null,
+          e.map((el) => (el && this.charCode(el.name).length / 4) || 0)
+        );
+        let hasRules = false;
+        e.map((el) => {
+          if (
+            el &&
+            el.name &&
+            this.rules[el.prop] &&
+            this.rules[el.prop][0].required
+          ) {
+            hasRules = true;
+          }
+        });
+        const indexList = e.map((el) => el && el.index);
+        return { nameLength, indexList, hasRules };
+      });
+    }
+  },
+  methods: {
+    // 表单重置
+    resetFields(){
+      this.$refs.fForm.resetFields();
+    },
+    // 优先子组件自己的 再表单的
+    formItemDisabled(item){
+      if(item.attrs&&item.attrs.hasOwnProperty('disabled')){
+        return item.attrs.disabled
+      }
+      return this.isDisabled
+    },
+    // 获取class
+    getClass(item, ind) {
+      const { labelPosition, column, configList } = this;
+      let classStr = ''
+      // 计算当前配置是不是没行最后一个
+      let allSpan = 0;
+      let pr = 'pr-8';
+      for (let _index = 0; _index <= Number(ind); _index++) {
+        const newSpan = configList[_index].span || 1;
+        allSpan += newSpan;
+      }
+      if (allSpan % column === 0) {
+        pr = '';
+      }
+      classStr += pr;
+
+      if (item.itemClass) {
+        classStr += item.itemClass;
+      }
+      return classStr;
+    },
+    // 通过labelWidth获取对应index里面的值
+    setWidth(item, index) {
+      // 增加rules为入参，判断当前项是否有必填校验，如果有那么width加上11px；
+      const val = this.labelWidth.find((e) => e.indexList.includes(index));
+      const rulesWidth = val.hasRules ? 11 : 0;
+      return val.nameLength * 14 + rulesWidth + 16 + 'px';
+    },
+    // 将字符串转为16进制值，汉子转4位，英文字母和数组转2位
+    charCode: (str) =>
+      str
+        .split('')
+        .reduce((total, e) => total + e.codePointAt(0).toString(16), ''),
+
+    //   格式化
+    formatter(column, v) {
+      if (v === null || v === undefined) return '-';
+      let value = v;
+      const { dataType } = column;
+      const type = dataType || '';
+      if (value !== '') {
+        if (type === 'money') {
+          value = formatNumber(value);
+        } else if (type === 'ten-thousand') {
+          value = formatNumber(value, 'ten-thousand');
+        } else if (type === 'number' || type === 'area') {
+          let decimal = 2;
+          if (type === 'number') {
+            decimal = 0;
+          }
+          value = formatNumber(value, null, decimal);
+        } else if (type === 'rate') {
+          value = formatNumber(value, 'rate');
+        } else if (type === 'date-d') {
+          // value = value
+        }
+      }
+      if(value === '0' || value === 0) return value
+      return value || '-';
+    },
+
+    // 事件传递
+    handleEmit($event,item,type){
+      item[type] && item[type]($event);
+      this.$emit(type,item,this.form)
+    },
+
+    // 校验
+    validate(callback){
+      return new Promise(resolve=>{
+        this.$refs.fForm.validate(resolve);
+      })
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.f-form .el-form-item {
+  margin-bottom: 25px;
+  // display: flex;
+  // align-items: center;
+  .el-change-icon {
+    transform: rotate(90deg);
+  }
+  .el-form-item_custom {
+    cursor: pointer;
+    i {
+      margin-left: 2px;
+    }
+  }
+}
+
+</style>

ruoyi-ui/src/baseComponents/f-form/readme.md

@@ -0,0 +1,481 @@
+# Form Item 表单组件
+
+根据配置生成表单，用于收集、校验数据。
+
+> 本组件只是对于 form-item 及表单元素的一个封装，所有 element 中的参数和事件都可以通过属性方式传入
+
+## Form Item Attributes
+
+| 参数          | 说明                                            | 类型    | 可选值     | 默认值  |
+| ------------- | ----------------------------------------------- | ------- | ---------- | ------- |
+| form          | 表单数据对象                                    | Object  | -          | -       |
+| disabled      | 是否禁用该表单内的所有组件                      | Boolean | -          | `false` |
+| config        | 表单域配置                                      | Array   | -          | -       |
+| rules         | 表单校验规则                                    | Array   | -          | -       |
+| column        | 总 col 布局，输入数字多少每行有多少个 form-item | Number  | -          | 4       |
+| itemWidth     | form-item 项的宽度                              | String  | -          | '100%'  |
+| clearable     | 是否开启每个表单右侧的清楚按钮                  | Boolean | -          | `true`  |
+| labelPosition | 是否左边 label                                  | String  | `Top/left` | `top`   |
+| attrs         | 接收 el-form-item 其他属性                      | Any     |            |
+
+> `form-item` 必须包裹在`<el-form/>`之内，同一个`<el-form/>`之内可以有多个`form-item`
+
+### Form Item Config Config
+
+`config` 数组中的每个元素都是一个对象，表示一个表单元素的配置。
+一部分配置是通用配置，对于不同的类型又有不同的选项可以配置。
+其主要可选的配置如下：
+
+| 键名        | 说明                                                                   | 类型         | 示例/说明                                                      |
+| ----------- | ---------------------------------------------------------------------- | ------------ | -------------------------------------------------------------- |
+| prop        | **必选**，`el-form-item`的`prop`                                       | String       | -                                                              |
+| itemType    | **必选**，表单元素类型                                                 | String,Array | 可选值：text/input/checkbox/datePicker/fileUpload/radio/select |
+| itemIndex   | itemType===Array 时**必选**，切换时自动改变 itemType 元素              | Number       | -                                                              |
+| iconName    | itemType===Array 时 切换的 icon,非必选，仅支持 element-ui 的 icon 类型 | String       | -                                                              |
+| label       | 表单元素显示的名称                                                     | String       | -                                                              |
+| width       | 表单元素宽度                                                           | String       | `{width:'100%'}`                                               |
+| rule        | 表单域的校验规则                                                       | Array        | `[{ required: true, message: '' }]`                            |
+| span        | 对应 col 占比，col 为 4，span 为 2，则该表单元素占整行的 50%           | String       | `1`                                                            |
+| placeholder | 表单域的提示文字                                                       | String       | -                                                              |
+| props       | 直接传递给组件的选项，_不推荐使用_                                     | Object       | -                                                              |
+| listKey     | `itemType`为`radio`/`select`/`checkbox`时有效,设置字典的 key           | String       | 默认:`label`                                                   |
+| listName    | `itemType`为`radio`/`select`/`checkbox`时有效,设置字典展示的 Name      | String       | 默认:`value`                                                   |
+| list        | `itemType`为`radio`/`select`/`checkbox`时有效,设置字典列表             | Array        | `[{label:'名称',value:'1'}]`                                   |
+| type        | 接收表单元素的 type                                                    | String       |
+| hasSlot     | 是否开启插槽，开启后 prop 为插槽名                                     | Boolean      | 默认`false`                                                    |
+| orderSlot     | 其他插槽，会在表单元素下面，值为插槽名                                     | String      | 默认-                                                    |
+| inputType   | `inputType`为`autoValue`时 `placeholder`为`--自动带入--'`              | String       |
+| attrs       | 接收表单元素其他属性                                                   | Any          |
+
+> 每个 itemType 的配置见 itemType Config
+
+### ItemType Config
+
+表单项配置中有一个关键属性 `itemType` 用来控制表单项渲染出的控件，配置不同类型的 `itemType` 时支持配置不同的参数，详见下表：
+
+| 类型       | 对应控件       | 支持的配置 |
+| ---------- | -------------- | ---------- |
+| text       | 文本           |            |
+| input      | 单行文本输入框 |            |
+| radio      | 单选按钮       | options    |
+| checkbox   | 复选框         | options    |
+| datePicker | 日期范围       | -          |
+| fileUpload | 文件上传       | -          |
+| select     | 下拉框         | -          |
+
+## Demo
+
+### 基本用法
+
+```html
+<template>
+  <div class="test">
+    {{formData}}
+     <f-form
+        ref="ruleForm"
+        :form="formData"
+        :config="configData"
+        :rules="formRules"
+        label-position="top"
+      >
+      </f-form>
+    <f-btn @click="submit">校验提交</f-btn>
+  </div>
+</template>
+
+<script>
+const list = [
+  {
+    name:'name1',
+    value:'1'
+  },
+  {
+    name:'name2',
+    value:'2'
+  }
+];
+export default {
+  name: 'FormItem',
+  data() {
+    return {
+      configData:[
+        {
+          itemType: 'input',
+          prop: 'input',
+          label: '输入框',
+          change:this.inputChange,
+          blur:this.inputBlur,
+          focus:this.inputFocus,
+          attrs:{
+            placeholder: '请输入input',
+            maxlength :10,
+            disabled:function(){
+              return false;
+            }
+          }
+        },
+        {
+          itemType: 'input',
+          prop: 'autoValue',
+          label: '自动带入框',
+          disabled:true,
+          attrs:{
+            placeholder: '请输入',
+            inputType:'autoValue',
+            disabled:true
+          }
+        },
+        {
+          itemType: 'input',
+          prop: 'inputNumber',
+          label: '数字输入框',
+          attrs:{
+            inputType:'Number',
+            placeholder: '请输入'
+          }
+        },
+        {
+          itemType: 'input',
+          prop: 'textarea',
+          rules:[{required:true}],
+          label: '文本域',
+          attrs:{
+            placeholder: '请输入',
+            span:2,
+            type:'textarea'
+          }
+        },
+        {
+          itemType: 'checkbox',
+          prop: 'checkbox',
+          label: 'checkbox',
+          change:this.checkboxChange,
+          attrs:{
+            list:list
+          }
+        },
+        {
+          itemType: 'radio',
+          prop: 'radio',
+          label: 'radio',
+          attrs:{
+            list:list
+          }
+        },
+        {
+          itemType: 'datePicker',
+          prop: 'year',
+          label: 'year',
+          attrs:{
+            type:'year'
+          }
+        },
+        {
+          itemType: 'datePicker',
+          prop: 'month',
+          label: 'month',
+          attrs:{
+            type:'month'
+          }
+        },
+        {
+          itemType: 'datePicker',
+          prop: 'date',
+          label: 'date',
+          attrs:{
+            type:'date',
+            pickerOptions:{
+              disabledDate:function(time){
+                return time.getTime() > Date.now();
+              }
+            }
+          }
+        },
+        {
+          itemType: 'datePicker',
+          prop: 'daterange',
+          label: 'daterange',
+          attrs:{
+            type:'daterange',
+            pickerOptions:{
+              disabledDate:function(time){
+                return time.getTime() > Date.now();
+              }
+            }
+          }
+        },
+        {
+          itemType: 'fileUpload',
+          prop: 'fileUpload',
+          label: 'fileUpload',
+          attrs:{
+            data:{moduleCode:'SYS',typeCode:'SYSSYS'}
+          }
+        },
+        {
+          itemType: 'select',
+          prop: 'select',
+          label: 'select',
+          change:this.inputChange,
+          attrs:{
+            list:list
+          }
+        },
+        {
+          itemType: 'select',
+          prop: 'selectList',
+          label: 'select多选',
+          change:this.inputChange,
+          attrs:{
+            multiple:true,
+            list:list
+          }
+        }
+      ],
+
+      formData:{
+
+        // input 相关
+        input:'',
+        textarea:'',
+        inputNumber:0,
+        autoValue:'',
+
+        // checkbox
+        checkbox:[],
+
+        // radio
+        radio:'',
+
+        // 日期
+
+        year:'',
+        month:'',
+        date:'',
+        daterange:[],
+
+        //文件上传
+        fileUpload:[],
+
+        // select
+        select:'',
+        selectList:[]
+      },
+
+      formRules:{
+        input:[{required: true}],
+        checkbox:[{required: true}],
+        radio:[{required: true}],
+        year:[{required: true}],
+        daterange:[{required: true}],
+        select:[{required: true}],
+        selectList:[{required: true}]
+      }
+      
+    };
+  },
+  mounted(){
+    setTimeout(()=>{
+      this.formData.autoValue = '123自动带入';
+    },1500);
+  },
+  methods: {
+    // 表单提交
+    submit:function(){
+      this.$refs.ruleForm.validate((valid, failedObj) => {
+        console.log(valid,failedObj);
+      });
+    },
+    // 表单change
+    formChange:function(item,form){
+      console.log(item,form);
+    },
+    // 输入框change
+    inputChange:function(val){
+      console.log('input change',val);
+    },
+    // 输入框blur
+    inputBlur:function(val){
+      console.log('input blur',val);
+    },
+    // 输入框Focus
+    inputFocus:function(val){
+      console.log('input focus',val);
+    },
+    // checkbox change
+    checkboxChange:function(val){
+      console.log('checkbox change',val);
+    },
+    // checkbox change
+    radioChange:function(val){
+      console.log('radio change',val);
+    }
+  }
+};
+</script>
+
+
+<!-- form-basic-usage.vue -->
+```
+
+### 表单联动
+
+```html
+<template>
+  <div>
+    <el-form
+      ref="ruleForm"
+      :model="formData"
+      :rules="rulesForm"
+      label-position="top"
+    >
+      <f-formItem
+        :form="formData"
+        :config="configData"
+        :column="5"
+        :pack-up="packUp"
+        clearable
+        label-position="left"
+      >
+        <!--插槽-->
+        <template #t22>
+          <el-button class="el-button el-button--text">插槽</el-button>
+        </template>
+      </f-formItem>
+    </el-form>
+    <el-button class="mt-20" type="primary" @click="submit">提交</el-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ex-form',
+
+    components: { Button },
+
+    data() {
+      return {
+        configData: [
+          // 表单配置
+          {
+            itemType: ['select', 'input'],
+            itemIndex: 0,
+            iconName: 'el-icon-user-solid', //支持自定义icon
+            prop: 't1',
+            label: '输入框',
+            placeholder: '请输入',
+            width: '206px',
+            required: true,
+          },
+          {
+            itemType: 'input',
+            type: 'textarea',
+            prop: 't2',
+            label: '输入框',
+            placeholder: '请输入',
+            width: '206px',
+          },
+          {
+            itemType: 'radio',
+            prop: 't3',
+            label: '单选框',
+            list: selectList,
+            width: '264px',
+          },
+          {
+            itemType: 'checkbox',
+            prop: 't3',
+            label: '复选框',
+            list: selectList,
+            checkAll: true,
+          },
+          {
+            itemType: 'datePicker',
+            prop: 't5',
+            label: '日期带默认值',
+            type: 'date',
+            width: '206px',
+          },
+          {
+            itemType: 'datePicker',
+            prop: 't6',
+            label: '日期valueFormat',
+            type: 'date',
+            width: '206px',
+            span: 2,
+            align: ' right',
+            valueFormat: 'yyyy-MM',
+          },
+          {
+            itemType: 'datePicker',
+            prop: 't4',
+            label: '日期range',
+            type: 'daterange',
+            width: '206px',
+            span: 2,
+          },
+          { itemType: 'select', prop: 't22', label: '插槽', hasSlot: true },
+          {
+            itemType: 'input',
+            prop: 't20',
+            label: '搜索框',
+            placeholder: '请输入',
+            width: '206px',
+            isSearch: true,
+          },
+
+          {
+            itemType: 'fileUpload',
+            prop: 'fileList',
+            label: '上传文件',
+            btnText: '上传',
+            width: '428px',
+            isSearch: true,
+            actionUrl: '',
+            limitNum: 4,
+            span: 2,
+          },
+          {
+            itemType: 'monthPicker',
+            prop: 't7',
+            label: '月份选择',
+            type: 'month',
+            width: '206px',
+            valueFormat: 'yyyy-MM',
+          },
+          {
+            itemType: 'timePicker',
+            prop: 't10',
+            label: '时间选择：时-分',
+          },
+        ],
+
+        rulesForm: {
+          // 表单验证
+          t1: [{ required: true, message: '请输入必填项' }],
+        },
+      }
+    },
+
+    methods: {
+      //提交
+      submit() {
+        this.$refs.ruleForm.validate((valid, failedObj) => {
+          
+          if (valid) {
+            // 在这里添加提交代码
+            
+          } else {
+            // 光标定位在以一个校验不通过项
+            setTimeout(() => {
+              var isError = document.getElementsByClassName('is-error')
+              isError[0].querySelector('input').focus()
+            }, 100)
+          }
+        })
+      },
+    },
+  }
+</script>
+<!-- form-advanced-usage.vue -->
+```

ruoyi-ui/src/baseComponents/f-formTable/index.vue

@@ -0,0 +1,284 @@
+
+<!--
+ * @Author: fhj
+ * @LastEditors: 傅豪杰 18516149270@163.com
+ * @Description: 表单表格
+-->
+<template>
+  <el-form ref="fForm" class="f-form" :model="data" :rules="rules">
+    <f-table
+      v-bind="$attrs"
+      class="f-formTable"
+      :data="data[prop]"
+      :column="column"
+      :checkbox="$attrs.hasCheckbox?true:false"
+      :show-slots="slotsList"
+      :show-operation="add"
+      :operation-width="operationWidth"
+      operation-label=""
+      v-on="$listeners"
+    >
+      <!-- 动态插槽 -->
+      <template v-for="(item,index) in colmAll" :slot="Object.keys(item)[0]" slot-scope="scope">
+        <el-form-item
+          v-if="!item.hasSlot&&item.type!='index'"
+          :key="'default_'+index"
+          :prop="`${prop}[${scope.$index}][${Object.keys(item)[0]}]`"
+          :rules="getRules(item)"
+        >
+          <div class="text-truncate" :style="{ width: item.itemConfig?item.itemConfig.width: itemWidth }">
+            <template v-if="item.itemType !== 'text'&&item.itemType">
+              <components
+                :is="'f-' + item.itemType"
+                v-model="data[prop][scope.$index][Object.keys(item)[0]]"
+                :disabled="item.isDisabled?item.isDisabled(data[prop][scope.$index],scope.$index,Object.keys(item)[0]):(item&&item.disabled?item.disabled:false)"
+                v-bind="{ ...item,...item.itemConfig }"
+                :formData="data[prop][scope.$index]"
+                :index="scope.$index"
+                @click.native.stop="() => {}"
+                @change="handleEmit($event,data[prop][scope.$index],item,'change')"
+              />
+            </template>
+            <span v-else>
+              {{ (item.formatter && item.formatter(data[prop][scope.$index])) || formatter(item,data[prop][scope.$index][Object.keys(item)[0]]) || data[prop][scope.$index][Object.keys(item)[0]] }}
+            </span>
+          </div>
+        </el-form-item>
+        <!-- 自定义插槽 -->
+        <template v-else-if="item.type!='index'">
+          <slot v-bind="scope" :name="Object.keys(item)[0]" />
+        </template>
+
+        <template v-if="item.type==='index'">
+          {{ scope.$index+1 }}
+        </template>
+
+      </template>
+      <template v-for="slotsItem in showSlots" :slot="slotsItem" slot-scope="scope">
+        <slot v-bind="scope" :name="slotsItem" />
+      </template>
+
+      <template v-if="add" #default="scope">
+        <!-- 增加行 -->
+        <p v-if="scope.row&&!scope.row.disabled" class="flex-al-center">
+          <span v-if="scope.$index===0&&firstRowAdd" class="operation add-icon" @click="addData" />
+          <span v-else class="operation minus-icon" @click="minusData(scope)" />
+          <slot v-bind="scope" name="otherBtn" />
+        </p>
+
+      </template>
+
+    </f-table>
+  </el-form>
+</template>
+
+<script>
+import { deepClone, formatNumber } from '@/utils/index';
+
+export default {
+  name: 'FFormTable',
+  model: {
+    prop: 'data',
+    event: 'dataChange'
+  },
+  props: {
+    column: { type: Array, default: () => [] }, // 配置文件
+    // 数据
+    data: {
+      type: Object,
+      default: () => {}
+    },
+    // 必填 数据prop
+    prop: {
+      type: String,
+      default: ''
+    },
+    // 表单校验
+    rules: {
+      type: Object,
+      default: () => {}
+    },
+    // 是否有添加删除功能
+    add: {
+      type: Boolean,
+      default: false
+    },
+    // 首行是否为新增
+    firstRowAdd: {
+      type: Boolean,
+      default: true
+    },
+    // 定义其他插槽列表
+    showSlots: {
+      type: Array,
+      default: () => []
+    },
+    // 是否为必填表单
+    required: {
+      type: Boolean,
+      default: false
+    },
+    // 加行时默认数据对象
+    defaultObj: {
+      type: Function,
+      default: () => {
+        return {};
+      }
+    },
+    itemWidth: { type: String, default: '100%' }, // form-item项的宽度
+    // 操作行宽度
+    operationWidth: {
+      type: String,
+      default: '100px'
+    }
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+    // 遍历子集Colm
+    colmAll() {
+      const colm = deepClone(this.column);
+      colm.forEach(item => {
+        if (item.tableList) {
+          item.tableList.forEach((tableItem, index) => {
+            colm.push(tableItem);
+          });
+        }
+        // delete item.tableList
+      });
+      return colm;
+    },
+    // 遍历子集Colm
+    colmList() {
+      const colm = [];
+      this.column.forEach(item => {
+        if (item.tableList) {
+          item.tableList.forEach((tableItem) => {
+            colm.push(tableItem);
+          });
+        }
+      });
+      return colm;
+    },
+    // 插槽
+    slotsList() {
+      // const slotsList = this.column.map(item => Object.keys(item)[0])
+      const slotsList = [];
+      this.column.forEach(item => {
+        slotsList.push(Object.keys(item)[0]);
+        if (item.tableList) {
+          item.tableList.forEach((tableItem) => {
+            slotsList.push(Object.keys(tableItem)[0]);
+          });
+        }
+      });
+      return [...slotsList, ...this.showSlots];
+    }
+  },
+  watch: {
+    data: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        if (this.add && !val[this.prop]&& this.required) {
+          val[this.prop] = []
+        }
+        if (this.add && val[this.prop].length === 0 && this.required) {
+          const obj = this.defaultObj();
+          val[this.prop].push(obj);
+        }
+      }
+    }
+  },
+  methods: {
+    getSlots(column) {
+      let slots = [];
+      column.map(item => {
+        slots.push(Object.keys(item)[0]);
+        if (item.tableList) {
+          slots = [...slots, ...this.getSlots(item.tableList)];
+        }
+      });
+      return slots;
+    },
+    // 获取form-item的rules
+    getRules(item) {
+      if (!this.rules) return null;
+      return this.rules[Object.keys(item)[0]];
+    },
+    // 新增一行
+    addData() {
+      const obj = this.defaultObj();
+      this.data[this.prop].push(JSON.parse(JSON.stringify(obj)));
+    },
+    // 删除
+    minusData(scope) {
+      this.$emit('changeDate', scope);
+      const idx = scope.$index;
+      this.data[this.prop].splice(idx, 1);
+      // 重置校验信息
+      this.$nextTick(() => {
+        if (this.$refs['fForm'] !== undefined) {
+          this.$refs['fForm'].clearValidate();
+        }
+      });
+    },
+    // 格式化
+    formatter(column, v) {
+      if (v === null || v === undefined) return '-';
+      let value = v;
+      const { type } = column;
+      if (value !== '') {
+        if (type === 'money') {
+          value = formatNumber(value);
+        } else if (type === 'ten-thousand') {
+          value = formatNumber(value, 'ten-thousand');
+        } else if (type === 'number' || type === 'area') {
+          value = formatNumber(value);
+        } else if (type === 'rate') {
+          value = formatNumber(value, 'rate');
+        } else if (type === 'date-d') {
+          // value = value
+        }
+      }
+
+      return value;
+    },
+    // 校验
+    validate(callback) {
+      return new Promise(reslove => {
+        this.$refs['fForm'].validate(valid => {
+          if (!valid) {
+            // 光标移动到第一个未填写的表单
+            setTimeout(() => {
+              const isError = document.getElementsByClassName('is-error');
+              isError[0].querySelector('input').focus();
+            }, 50);
+          }
+          callback && callback(valid);
+          reslove(valid);
+        });
+      });
+    },
+
+    // 事件传递
+    handleEmit($event,form,item,type){
+      if(item.listeners&&item.listeners[type]){
+        item.listeners[type](form)
+      }
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.f-formTable {
+  .el-form-item__error{
+    display: none;
+  }
+  .el-form-item{
+    margin-bottom: 0;
+  }
+}
+</style>

ruoyi-ui/src/baseComponents/f-formTable/readme.md

@@ -0,0 +1,132 @@
+# TableForm Item 表单组件
+
+根据配置生成 b 表格表单，校验数据。
+
+## Form Item Attributes
+
+| 参数        | 说明                                          | 类型    | 可选值 | 默认值 |
+| ----------- | --------------------------------------------- | ------- | ------ | ------ |
+| v-model     | 表格表单绑定的数据对象,需要 Object 嵌套 Array | Object  | -      | -      |
+| prop        | 绑定的 v-model 中用来渲染数据的数组 key       | String  | -      |        |
+| column      | 表格表单配置                                  | Array   | -      | -      |
+| rules       | 表单校验规则,Array Item 每个对象的校验规则    | Object  | -      | -      |
+| add         | 是否显示添加按钮                              | Boolean | -      | `true` |
+| firstRowAdd | 首行是否为新增                                | Boolean | -      | `true` |
+| attrs       | 接收 f-table,el-table 其他属性              | Any     |        |
+
+### Column Config
+
+`column` 的每一项都是一个对象，表示当前列的配置。
+`column` 的第一个属性 key 为`el-table-column`和`f-formItem\表单元素的v-model`的`props`,`value`为`label`,切记必须放在第一个
+其主要可选的配置如下：
+
+| 键名       | 说明                                                              | 类型    | 示例                                                           |
+| ---------- | ----------------------------------------------------------------- | ------- | -------------------------------------------------------------- |
+| 第一个属性 | **必选**，对应的                                                  | String  | { name:'姓名' } 其中 `name`会作为 prop， `姓名`为 label        |
+| width      | 宽度                                                              | String  | `200px`                                                        |
+| itemType   | **必选**，表单元素类型                                            | String  | 可选值：text/input/checkbox/datePicker/fileUpload/radio/select |
+| listKey    | `itemType`为`radio`/`select`/`checkbox`时有效,设置字典的 key      | String  | 默认:`label`                                                   |
+| listName   | `itemType`为`radio`/`select`/`checkbox`时有效,设置字典展示的 Name | String  | 默认:`value`                                                   |
+| list       | `itemType`为`radio`/`select`/`checkbox`时有效,设置字典列表        | Array   | `[{label:'名称',value:'1'}]`                                   |
+| type       | 接收表单元素的 type                                               | String  |
+| required   | 是否显示必填星号                                                  | Boolean |
+| Attrs      | 继承 f-formItem 的 Config Item 所有属性                        | Any     |
+
+> `column`的第一个`key:value` `key为prop，value为label`，为 column 固定写法,其余属性继承 f-formItem 所有属性
+
+### ItemType Config
+
+表单项配置中有一个关键属性 `itemType` 用来控制表单项渲染出的控件，配置不同类型的 `itemType` 时支持配置不同的参数，详见下表：
+
+| 类型       | 对应控件       | 支持的配置 |
+| ---------- | -------------- | ---------- |
+| text       | 文本           |            |
+| input      | 单行文本输入框 |            |
+| radio      | 单选按钮       | options    |
+| checkbox   | 复选框         | options    |
+| datePicker | 日期范围       | -          |
+| fileUpload | 文件上传       | -          |
+| select     | 下拉框         | -          |
+
+## Demo
+
+### 基本用法
+
+```html
+<template>
+  <f-formTable
+    ref="formTable"
+    v-model="formTableData"
+    prop="tableData1"
+    :column="formTableConfig"
+    :rules="formTableRules"
+    add
+    :first-row-add="false"
+  />
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        // v-model对象
+        formTableData: {
+          // 取v-model[prop]值作为绑定数据列表
+          tableData1: [{ t1: '123', upload: [{ name: 'xxx.jpg' }] }],
+        },
+        // 表单表格配置
+        formTableConfig: [
+          {
+            name: '姓名',
+            
+            itemType: 'input',
+            required: true,
+            width: 300,
+          },
+          {
+            date: '姓名',
+            
+            itemType: 'datePicker',
+            type: 'daterange',
+            required: true,
+            width: 400,
+          },
+          {
+            sex: '性别',
+            sortable: true,
+            itemType: 'select',
+            list: [],
+            width: 200,
+          },
+          {
+            upload: '上传',
+            itemType: 'fileUpload',
+            width: 500,
+            actionUrl: '',
+            limitNum: 4,
+            span: 2,
+          },
+          {
+            t1: '性别',
+            sortable: true,
+            itemType: 'text',
+            list: [],
+            width: 200,
+          },
+        ],
+        formTableRules: {
+          name: [{ required: true, message: '' }],
+        },
+      }
+    },
+    methods: {
+      // 表单校验 返回true时校验通过
+      async validate() {
+        const res = await this.$refs['formTable'].validate()
+        
+        
+      },
+    },
+  }
+</script>
+<!-- form-basic-usage.vue -->
+```

ruoyi-ui/src/baseComponents/f-icon/index.vue

@@ -0,0 +1,66 @@
+<!--
+ * @Author: liuye
+ * @LastEditors: fhj
+ * @Description:
+-->
+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :href="iconName" />
+  </svg>
+</template>
+
+<script>
+import { isExternal } from '../../utils/validate';
+
+export default {
+  name: 'FIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass);
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`;
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className;
+      } else {
+        return 'svg-icon';
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      };
+    }
+  }
+};
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>

ruoyi-ui/src/baseComponents/f-icon/new.vue

@@ -0,0 +1,82 @@
+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="f-icon svg-external-icon svg-icon" />
+  <div v-else class="f-icon" v-on="$listeners">
+    <!-- <svg :class="svgClass" aria-hidden="true">
+      <use :href="iconName" />
+    </svg> -->
+    <img class="svg-img" :src="svgImage" :alt="$attrs.alt ? $attrs.alt : iconClass" />
+  </div>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '../../utils/validate';
+
+export default {
+  name: 'FIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass);
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`;
+    },
+    svgImage() {
+      if (isExternal(this.iconClass)) {
+        return '';
+      }
+      return require(`../../assets/svg/${this.iconClass}.svg`);
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className;
+      } else {
+        return 'svg-icon';
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.f-icon {
+  display: inline-flex;
+  width: 2em;
+  height: 2em;
+  .svg-img {
+    width: 100%;
+    height: 100%;
+    vertical-align: -0.15em;
+    overflow: hidden;
+  }
+  &.svg-icon {
+    width: 2em;
+    height: 2em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+  }
+
+  &.svg-external-icon {
+    background-color: currentColor;
+    mask-size: cover!important;
+    display: inline-block;
+  }
+}
+</style>

ruoyi-ui/src/baseComponents/f-input/index.vue

@@ -0,0 +1,71 @@
+<!--
+ * @Author: fhj
+ * @LastEditors: 傅豪杰 18516149270@163.com
+ * @Description:
+-->
+<template>
+    <el-input
+      v-bind="$attrs"
+      :placeholder="$attrs.placeholder || '请输入'"
+      resize="none"
+      class="f-input"
+      :disabled="isDisabled"
+      @input="handleInput"
+      @blur="handleBlur"
+      @submit.native.prevent
+      @focus="handleFocus"
+    >
+		<!-- 输入框头部内容 -->
+		<template #prefix v-if="hasSlot('prefix')">
+			<slot name="prefix"/>
+		</template>
+
+		<!-- 输入框尾部内容 -->
+		<template #suffix v-if="hasSlot('suffix')">
+			<slot name="suffix"/>
+		</template>
+
+    </el-input>
+</template>
+
+<script>
+import formMixins from'../../mixins/formMixins.js'
+export default {
+  name: 'FInput',
+  inheritAttrs: false,
+  mixins:[formMixins],
+  data() {
+    return {
+      focus: true, // 是否聚焦
+    };
+  },
+  props:{
+	  inputType:{
+		  type:String,
+		  default:''
+	  },
+  },
+  methods: {
+    // focus
+    handleFocus(val) {
+      this.$emit('focus',this.$attrs.value)
+    },
+    // blur
+    handleBlur(val) {
+      this.$emit('blur',this.$attrs.value)
+    },
+    // input
+    handleInput(val) {
+	  // input通知外部修改，触发双向绑定
+      this.$emit('input',val)
+	  // chang触发事件
+      this.$emit('change',val)
+    },
+    // 是否有对应的插槽
+    hasSlot(name){
+      this.$scopedSlots[name] = this[name]
+          return true
+      }
+  }
+};
+</script>

ruoyi-ui/src/baseComponents/f-input/readme.md

@@ -0,0 +1,93 @@
+<!--
+ * @Author: fhj
+ * @LastEditors: fhj
+ * @Description: 
+-->
+# Input 输入框组件
+
+input输入框
+
+
+## Input Attributes
+
+| 参数          | 说明                                            | 类型    | 可选值     | 默认值  |
+| ------------- | ----------------------------------------------- | ------- | ---------- | ------- |
+| v-model          | 双向绑定数据                                    | String/Number  | -          | ''       |
+| inputType     | 输入框类型，默认空                  | String | Number/autoValue         | ``  |
+| disabled     | disabled状态，可以传Fn                  | Function,Boolean | -        | `false`  |
+| attrs         | 其他跟el-input一致                      | Any     |            |
+
+> inputType为Number时 输入框开启数字输入限制，参考onlyNumber指令\
+> inputType为autoValue时 默认placeholder为`--自动带入--`\
+> 其他与el-input所有操作一样
+
+### Input Autocomplete Slots
+
+
+| 键名        | 说明                         
+| ----------- | ------|
+| prefix        | 输入框头部内容
+| suffix        | 输入框尾部内容
+
+> 仅支持这2个插槽
+
+
+## Input Events
+
+| 事件名称 | 说明                 | 回调参数                                                                        |
+| -------- | -------------------- | -------------------------------------- |
+| change   | 输入框值发生改变时触发 | value |
+| blur   | input失去焦点时触发 | value |
+| focus   | input聚焦时触发 | value |
+
+## Demo
+
+### 基本用法
+
+```html
+<template>
+  <div class="test">
+    <f-input v-model="value" @change="change" @focus="focus" @blur="blur">
+			<template #prefix>头部</template>
+			<template #suffix>尾部</template>
+		</f-input>
+		<br>
+		<br>
+    <f-input v-model="value"  type="textarea"/>
+		<br>
+		<br>
+		<f-input v-model="value" inputType="Number" :numberConfig="{max: 100, min: 0, decimal: 2}">
+		</f-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Input',
+  data() {
+    return {
+      value:'123'
+    };
+  },
+  mounted(){
+	  setTimeout(()=>{
+      this.value = 123123;
+    },1000);
+  },
+  methods: {
+    change:function(val){
+		  console.log('change',val);
+    },
+    focus:function(val){
+		  console.log('focus',val);
+    },
+    blur:function(val){
+		  console.log('blur',val);
+    }
+  }
+};
+</script>
+
+
+<!-- input-basic-usage.vue -->
+```

ruoyi-ui/src/baseComponents/f-pagination/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="f-pagination-container flex-ju-al-between ml-16">
+    <div class="f-pagination-left">
+      <!-- <span>共{{ total }}条数据，当前在{{ currentPage }}/{{ Math.ceil(total / pager.pageSize) === 0? 1:Math.ceil(total / pager.pageSize) }}页</span> -->
+      <span>共{{ total }}条数据</span>
+    </div>
+    <div class="f-pagination-right">
+      <el-pagination
+        :current-page="pager.pageNo"
+        :page-sizes="pageSizes"
+        :page-size="pager.pageSize"
+        layout="prev, pager, next, sizes"
+        :total="total"
+        popper-class="define-pagination-select"
+        v-bind="$attrs"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        v-on="$listeners"
+      />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'FPagination',
+  props: {
+    // 总数
+    total: {
+      type: Number,
+      default: 0
+    },
+    // 分页
+    page: {
+      type: Object,
+      default: () => {}
+    },
+    // 页面size可选项
+    pageSizes: {
+      type: Array,
+      default: () => [15, 20, 50, 100, 200]
+    }
+  },
+  data() {
+    return {
+      currentPage: 1,
+      selectedDom: '',
+      pager: {
+        pageNo: 1,
+        pageSize: 20
+      }
+    };
+  },
+  watch: {
+    selectedDom: {
+      handler(nweVal, oldVal) {
+        if (nweVal) {
+          const i = document.createElement('i');
+          i.className = 'el-icon-check';
+          nweVal.append(i);
+        }
+        if (oldVal) {
+          oldVal.removeChild(oldVal.childNodes[1]);
+        }
+      },
+      immediate: true
+    },
+    // 分页监听
+    page(val) {
+      this.pager = val;
+    },
+    // 总数监听
+    total(val) {
+      const { pageSize, pageNo } = this.page;
+      if (val === 0) return; // 未请求数据或者无数据时不触发
+      if (val && pageSize && pageNo) { // 防止外部不传数据导致抛异常
+        // 当前总页数
+        const newPageNo = val / pageSize + (val % pageSize === 0 ? 0 : 1);
+        if (pageNo > newPageNo) {
+          // 如果外部传入的当前页数大于计算下来的总页数 pageNo改成当前总页数
+          this.pager.pageNo = newPageNo;
+          this.$emit('change', this.pager);
+        }
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.selectedDom = document.querySelector('.define-pagination-select .el-select-dropdown__list .selected');
+    });
+  },
+  methods: {
+    handleSizeChange(val) {
+      // this.pageSize = val
+      this.$nextTick(() => {
+        this.selectedDom = document.querySelector('.define-pagination-select .el-select-dropdown__list .selected');
+      });
+      this.pager.pageSize = val;
+      this.pager.pageNo = 1;
+      this.$emit('change', this.pager);
+    },
+    handleCurrentChange(val) {
+      this.pager.pageNo = val;
+      this.$emit('change', this.pager);
+    }
+  }
+};
+</script>

ruoyi-ui/src/baseComponents/f-pagination/readme.md

@@ -0,0 +1,110 @@
+<!--
+ * @Author: fhj
+ * @LastEditors: 傅豪杰 18516149270@163.com
+ * @Description: 
+-->
+# Page 分页组件
+
+分页组件
+
+## Page Attributes
+
+| 参数    | 说明               | 类型   | 可选值 | 默认值  |
+| ------- | ---------------- | ------ | ------ | ------- |
+| total   | 总数   | Number | -      | 0      |
+| page   |  page对象   | Object | -      |  |
+| pageSizes     | 每页数量可选值 | Array | -      | `[10, 20, 30, 50]` |
+
+
+
+## Page Events
+
+| 事件名称 | 说明                  | 回调参数 |
+| -------- | --------------------- | -------- |
+| change   | 分页发生变化事件 | page       |
+
+
+## page Object
+| 参数    | 说明               | 类型   | 可选值 | 默认值  |
+| ------- | ---------------- | ------ | ------ | ------- |
+| pageNo   | 当前页码   | Number | -      |       |
+| pageSize   |  每页条数   | Number | -      |  |
+
+>`page:{
+>   pageNo:1,
+>   pageSize:20    
+>}`
+
+## Demo
+
+### 基本用法
+
+```html
+<template>
+  <f-pagination :page="page" @change="pageChange"/>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+          page:{
+              pageNo:1,
+              pageSize:20
+          }
+      }
+    },
+    methods: {
+      pageChange(newPage) {
+          this.page = {...newPage}
+          this.getList()
+      },
+      getList(){
+        
+      }
+    }
+  }
+</script>
+```
+
+
+
+
+### 外部控制 external:true用法
+
+```html
+<template>
+  <f-dialog 
+        :title="'新增'" 
+        external
+        :is-show-dialog="visible"
+        @closeDialog="handleVisible">
+      <!-- 弹窗表格 -->
+      <template #contain>
+        弹窗内容
+      </template>
+      <!-- 弹窗按钮 -->
+      <template #btn>
+        <div class="text-right" @click="preservation">
+          <f-btn>保存</f-btn>
+        </div>
+      </template>
+    </f-dialog>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+          visible:true,//默认打开弹窗
+      }
+    },
+    methods: {
+      closeDialog() {
+        
+      },
+      handleVisible(){
+        
+      }
+    }
+  }
+</script>
+```

ruoyi-ui/src/baseComponents/f-popover/index.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Author: fhj
+ * @LastEditors: fhj
+ * @Description: 级联选择弹窗
+-->
+<template>
+  <el-popover
+    v-model="isShowDialog"
+    placement="bottom-start"
+    class="f-popover--wrapper"
+    popper-class="f-popover"
+    :trigger="trigger"
+    :width="width"
+    :disabled="disabled"
+    @show="show"
+  >
+    <!-- 触发区域 -->
+    <span slot="reference">
+      <slot />
+    </span>
+
+    <slot v-if="isShowDialog" name="content" />
+  </el-popover>
+</template>
+<script>
+
+export default {
+  name: 'FPopover',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 数据类型  show=>铺位  user=>人员
+    dataType: {
+      type: String,
+      default: 'shop'
+    },
+    // 初始化数据
+    initData: {
+      type: Function
+    },
+    // trigger类型
+    trigger: {
+      type: String,
+      default: 'click'
+    },
+    // width宽度
+    width: {
+      type: [Number, String],
+      default: '200'
+    },
+    // 显示之前钩子
+    beforeShow: {
+      type: Function,
+      default: () => {
+        return true;
+      }
+    }
+  },
+  data() {
+    return {
+      isShowDialog: false // 是否显示弹窗
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    // slot点开插槽
+    closePop() {
+      this.isShowDialog = false;
+    },
+    // 初始化数据
+    show() {
+      // 显示之前如果返回false 则取消显示
+      if (!this.beforeShow()) {
+        this.closePop();
+        return;
+      }
+      this.initData && this.initData();
+    }
+  }
+};
+</script>

ruoyi-ui/src/baseComponents/f-radio/index.vue

@@ -0,0 +1,55 @@
+<!--
+ * @Author: fhj
+ * @LastEditors: fhj
+ * @Description:
+-->
+<template>
+  <el-radio-group v-bind="$attrs" :disabled="isDisabled" v-model="currentValue" class="flex-al-center" @change="handleChange">
+    <el-radio v-for="(item, index) in list" :key="'radio' + index" :label="item[listKey]">
+      {{ item[listName] }}
+    </el-radio>
+  </el-radio-group>
+</template>
+
+<script>
+import formMixins from'../../mixins/formMixins.js'
+export default {
+  name: 'FRadio',
+  inheritAttrs: false,
+  mixins:[formMixins],
+  props: {
+     // 绑定的数据
+    value: {},
+     // 渲染的options
+    list: {
+      type: Array,
+      default: () => []
+    },
+    // 选项value
+    listKey:{
+      type:String,
+      default:'value'
+    },
+    // 选项name
+    listName:{
+      type:String,
+      default:'name'
+    }
+  },
+  computed:{
+    currentValue:{
+      get(){
+        return this.value || []
+      },
+      set(val){
+        this.$emit('input',val)
+      }
+    },
+  },
+  methods:{
+    handleChange(val){
+      this.$emit('change',val)
+    }
+  }
+};
+</script>

ruoyi-ui/src/baseComponents/f-radio/readme.md

@@ -0,0 +1,80 @@
+<!--
+ * @Author: fhj
+ * @LastEditors: fhj
+ * @Description: 
+-->
+# Radio 单选组件
+
+Radioc单选
+
+
+## Radio Attributes
+
+| 参数          | 说明                                            | 类型    | 可选值     | 默认值  |
+| ------------- | ----------------------------------------------- | ------- | ---------- | ------- |
+| v-model          | 双向绑定数据                                    | String/Number  | -          | ''       |
+| disabled     | disabled状态，可以传Fn                  | Function,Boolean | -        | `false`  |
+| list     | 可选项数组                   | Array | -        |`[]` |
+| listName     | 展示用name                   | String | -        |`name` |
+| listkey     | 选项key                   | String | -        |`value` |
+| attrs         | 其他跟el-radio一致                      | Any     |            |
+
+> 其他与el-radio所有操作一样
+
+
+
+
+## Radio Events
+
+| 事件名称 | 说明                 | 回调参数                                                                        |
+| -------- | -------------------- | -------------------------------------- |
+| change   | 值发生改变时触发 | value |
+
+## Demo
+
+### 基本用法
+
+```html
+<template>
+  <div class="test">
+      <f-radio :list="list" v-model="form.radio" @change="change"></f-radio>
+      <f-radio :list="list" v-model="radio" @change="change"></f-radio>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Radio',
+  data() {
+    return {
+      list:[
+        {
+          name:'radio1',
+          value:'radio1'
+        },
+        {
+          name:'radio2',
+          value:'radio2'
+        }
+      ],
+      form:{
+        radio:''
+      },
+      radio:'radio1'
+    };
+  },
+  created(){
+    setTimeout(()=>{
+      this.form.radio = 'radio2';
+    },1000);
+  },
+  methods:{
+    change:function(val){
+      console.log(val);
+    }
+  }
+};
+</script>
+
+<!-- radio-basic-usage.vue -->
+```

ruoyi-ui/src/baseComponents/f-select/index.vue

@@ -0,0 +1,101 @@
+<!--
+ * @Author: fhj
+ * @LastEditors: 傅豪杰 18516149270@163.com
+ * @Description:
+-->
+<template>
+  <el-select
+    v-model="currentValue"
+    v-bind="$attrs"
+    :popper-append-to-body="false"
+    :placeholder="$attrs.placeholder || '请选择'"
+    style="width: 100%"
+    :class="['f-select']"
+    :disabled="isDisabled"
+    popper-class="f-select-dropdown"
+    @change="handleChange"
+    @visible-change="visibleChange"
+  >
+    <div v-if="getList&&getList.length>=3" style="max-width:100%" class="search-input-content">
+      <div class="search-input px-12 pb-4 border-box">
+        <el-input v-model="searchVal" class="select-search-input" size="small" placeholder="请输入搜索内容">
+          <i slot="prefix" class="el-input__icon el-icon-search" />
+        </el-input>
+      </div>
+      <div class="search-empt" />
+    </div>
+    <el-option v-if="searchVal!==''&&isShowEmpt" disabled value="none" class="text-center">
+      暂无数据
+    </el-option>
+    <template v-for="(item, index) in getList">
+      <el-option
+        v-if="searchVal===''|| item[$attrs.listName || 'name'].includes(searchVal)"
+        :key="'select' + index"
+        :label="item[$attrs.listName || 'name']"
+        :value="item[$attrs.listKey || 'value']"
+        :disabled="item.disabled"
+      >
+        <span class="float-left">{{ item[$attrs.listName || 'name'] }}</span>
+        <!-- <span v-if="currentValue === item[$attrs.listKey || 'value']" class="float-right gouicon">
+          <f-icon icon-class="bluegou" class="icon" />
+        </span> -->
+      </el-option>
+    </template>
+  </el-select>
+</template>
+
+<script>
+import formMixins from'../../mixins/formMixins.js'
+export default {
+name: 'FSelect',
+inheritAttrs: false,
+mixins:[formMixins],
+props: {
+  value:{}
+},
+data() {
+  return {
+    // 搜索输入
+    searchVal: '',
+    list: []
+  };
+},
+computed: {
+  currentValue:{
+    get(){
+      return this.value || ''
+    },
+    set(val){
+      this.$emit('input',val)
+    }
+  },
+  // 是否显示模拟占位
+  isShowEmpt() {
+    if (this.searchVal === '') return false;
+    const list = (this.getList || []).filter(item => {
+      return item[this.$attrs.listName || 'name'].includes(this.searchVal);
+    });
+    return list.length === 0;
+  },
+
+  // 是否自定义每行的list配置
+  getList() {
+    let list = this.$attrs.list || [];
+    if (this.$attrs.getList) {
+      list = this.$attrs.getList(this.$attrs.formData, this.$attrs.prop, this.index);
+    }
+    return list;
+  }
+},
+methods: {
+  visibleChange(val) {
+    setTimeout(() => {
+      this.searchVal = '';
+    }, 300);
+  },
+  handleChange(){
+    this.$emit('change',this.currentValue)
+  }
+}
+};
+</script>

ruoyi-ui/src/baseComponents/f-table/column.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-table-column
+    v-bind="$attrs"
+    ref="tableColumn"
+    :type="$attrs.type==='index'?$attrs.type:''"
+    :prop="`${Object.keys(item)[0]}`"
+    :label="item[Object.keys(item)[0]]"
+    :label-class-name="(item.labelClass||'') + (item.required?' required':'')"
+    :show-overflow-tooltip="item.showTooltips || !isShowSlots(Object.keys(item)[0])"
+    :sortable="item.sortable?'custom':false"
+    :fixed="item.fixed"
+  >
+  
+    <template v-if="item.hasSlotHeader" #header="scope">
+      <slot v-bind="scope" name="header" />
+    </template>
+    
+    <!-- 有多重表格的情况下 -->
+    <template v-if="item.tableList&&item.tableList.length>0">
+      <FTableColumn
+        v-for="(_item, index) in item.tableList"
+        :key="'ftable' + index"
+        v-bind="{ ..._item }"
+        :item="_item"
+        :fixed="_item.fixed"
+        :prop="`${Object.keys(_item)[0]}`"
+        :label="_item[Object.keys(_item)[0]]"
+        show-overflow-tooltip
+        :show-slots="showSlots"
+      >
+        <!-- 插槽 -->
+        <template v-for="slotsItem in showSlots" :slot="slotsItem" slot-scope="scope">
+          <slot v-bind="scope" :name="slotsItem" />
+        </template>
+
+      </FTableColumn>
+
+    </template>
+
+    <!-- 是否显示插槽 -->
+    <template v-if="isShowSlots(Object.keys(item)[0])" #default="scope">
+      <slot v-bind="scope" :name="Object.keys(item)[0]" />
+    </template>
+
+  </el-table-column>
+</template>
+
+<script>
+export default {
+  name: 'FTableColumn',
+  props: {
+    // 当前列配置
+    item: {
+      type: Object,
+      default: () => {}
+    },
+    // 是否固定列
+    showFixed: {
+      type: Boolean,
+      default: false
+    },
+    // 插槽数组
+    showSlots: {
+      type: Array,
+      default: () => []
+    },
+  },
+  data() {
+    return {
+    };
+  },
+  mounted() {
+  },
+  methods: {
+    // 将选中的状态值抛出去接收
+    $comSelect(selectData) {
+      if (!this.checkbox) {
+        return false;
+      }
+      this.$emit('onSelect', selectData);
+    },
+    isShowSlots(val) {
+      return this.showSlots.includes(val);
+    },
+  }
+};
+</script>

ruoyi-ui/src/baseComponents/f-table/index.vue

@@ -0,0 +1,452 @@
+<!--
+ * @Author: fhj
+ * @LastEditors: xianing
+ * @Description: f-表格组件
+-->
+<template>
+  <div class="f-table" :class="[
+    full ? 'max-area' : '',
+    classText
+  ]" @mouseup="mouseup" @mousedown="mousedown">
+    <el-table 
+      :id="`fTable${tableId}`" 
+      :key="tableKey" 
+      ref="fTable" 
+      v-bind="$attrs" 
+      :data="dataList"
+      v-loading="loading"
+      :style="'width: 100%'" 
+      :height="full ? '100%' : height || null" 
+      :tree-props="treeProps" 
+      :row-key="$attrs.rowKey || $attrs['row-key'] || ''"
+      v-on="listenersStatus ? $listeners : ''"
+      @select="$comSelect" 
+      @select-all="$comSelectAll"
+      @current-change="$comRowChange" 
+      @sort-change="sortChange"
+    >
+      <template slot="empty" class="flex-ju-al-center"> 暂无数据 </template>
+      <!-- checkbox -->
+      <el-table-column v-if="checkbox" type="selection" width="60" v-bind="{ ...selectionProps }"
+        :selectable="selectable" align="center" class-name="noTips table-checkbox" fixed />
+
+      <!-- 单选行样式 -->
+      <el-table-column v-if="highLightCurrentRow" width="60" align="center"
+        class-name="noTips table-checkbox" fixed>
+        <template slot-scope="scope">
+          <el-radio v-model="currentRow[selectKey]" :label="scope.row[selectKey]" class="noLabel"
+            @click.native.stop="radioClick($event, scope.row)" />
+        </template>
+      </el-table-column>
+
+      <!-- 树级样式 -->
+      <el-table-column v-if="$attrs.hasChildren" class-name="hasChildren" width="80px" />
+
+      <!-- 是否显示expand -->
+      <el-table-column v-if="showExpand" type="expand">
+        <template #default="scope">
+          <slot v-bind="scope" name="expand" />
+        </template>
+      </el-table-column>
+
+      <!-- 组件需求： 多选框列和内容列第一列固定 -->
+      <FTableColumn 
+        v-for="(item, index) in currentConfig" 
+        :key="'ftable' + index" 
+        v-bind="{ ...item }"
+        :item="item" 
+        :fixed="showFixed" 
+        :prop="`${Object.keys(item)[0]}`"
+        :label="item[Object.keys(item)[0]]" 
+        :width="item.width || ''"
+        :formatter="item.formatter || null" 
+        show-overflow-tooltip :show-slots="showSlots"
+        :label-class-name="(item.labelClass || '') + (item.required ? ' required' : '')" 
+        :class-name="item.columnClass"
+        :align="item.align || 'left' " 
+        :slots-list="item.slots">
+        <!-- 表头收起 -->
+        <template v-if="item.hasClose" #header="scope">
+          <span>
+            {{ item[Object.keys(item)[0]] }}
+            <i :class="['table-header-icon', !item.isClose ? '' : 'table-header-icon-close']" @click="
+              (event) => {
+                handleHeaderClose(scope, event)
+              }
+            " />
+          </span>
+        </template>
+
+        <!-- 表头插槽传递 -->
+        <template v-else-if="item.hasSlotHeader" #header="scope">
+          <slot v-bind="scope" :name="item.slotsItem" />
+        </template>
+
+        <!-- 二级插槽传递 -->
+        <template v-for="slotsItem in showSlots" :slot="slotsItem" slot-scope="scope">
+          <slot v-bind="scope" :name="slotsItem" />
+        </template>
+      </FTableColumn>
+      <!-- 组件需求： 操作列固定 -->
+      <el-table-column v-if="showOperation" :fixed="showFixed ? 'right' : false" :label="operationLabel"
+        :width="operationWidth">
+        <template #default="scope">
+          <slot v-bind="scope" />
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import FTableColumn from './column.vue';
+import map from 'lodash/map';
+
+export default {
+  name: 'FTable',
+  components: { FTableColumn },
+  props: {
+    // table外层div自定义class
+    classText: {
+      type: String,
+      default: ''
+    },
+    // 表单数据
+    data: {
+      type: Array,
+      default: () => []
+    },
+    // 表单列内容
+    column: {
+      type: Array,
+      default: () => []
+    },
+    // 是否具备展开列
+    showExpand: {
+      type: Boolean,
+      default: false
+    },
+    // 是否固定首行
+    showFixed: {
+      type: Boolean,
+      default: false
+    },
+    // 遮罩层
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 是否展示checkbox
+    checkbox: {
+      type: Boolean,
+      default: true
+    },
+    // selection操作列添加自定义属性
+    selectionProps: {
+      type: Object,
+      default: () => { }
+    },
+    // 复选框是否可选择
+    selectable: {
+      type: Function,
+      default: function (row) {
+        return true;
+      }
+    },
+    // 设置操作项宽度
+    operationWidth: {
+      type: String,
+      default: 'auto'
+    },
+    // 是否显示操作
+    showOperation: {
+      type: Boolean,
+      default: false
+    },
+    // 插槽数组
+    showSlots: {
+      type: Array,
+      default: () => []
+    },
+    // 高亮用选中的id-key 默认id
+    selectKey: {
+      type: String,
+      default: 'id'
+    },
+    // 是否撑满
+    full: {
+      type: Boolean,
+      default: false
+    },
+    // 高度
+    height: {
+      type: [String, Number],
+      default: ''
+    },
+    // 操作列文字
+    operationLabel: {
+      type: String,
+      default: '操作'
+    },
+    // 树数据配置
+    treeProps: {
+      type: Object,
+      default: () => { }
+    },
+    selectRows: {
+      type: Array,
+      default: () => []
+    },
+    // 是否为树形结构
+    isTreeStructure: {
+      type: Boolean,
+      default: false
+    },
+    // 是否单选行
+    highLightCurrentRow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      mouseTime: 0,
+      selectRow: [], // 选中行
+      indexList: [], // 需要高亮的行
+      // tableId
+      tableId: new Date().getTime(),
+      currentConfig: this.column.concat(),
+      isUpdateTable: true,
+      currentRow: {}, // 单选情况下选中的行
+      tableKey: 0, // table key
+      indexConfig: {}, // index配置
+      listenersStatus: true, // 是否绑定事件'
+      checkedKeys: false, // 树形结构是否已全选
+      copyText: '' // 复制的内容
+    };
+  },
+  computed: {
+    // 列表变化后重置select
+    dataList(data) {
+      this.indexList = [];
+      return this.data;
+    }
+  },
+
+  watch: {
+    dataList: {
+      handler(newValue) {
+        this.$nextTick(() => {
+          if (this.selectRows.length > 0) {
+            this.toggleSelect();
+          }
+        });
+      }
+    },
+    // 配置监听
+    column: {
+      deep: true,
+      immediate: true,
+      handler() {
+        const currentConfig = this.column.concat();
+        if (currentConfig.length) {
+          this.currentConfig = this.initCurrentConfig(currentConfig);
+        }
+      }
+    }
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.$refs['fTable'].doLayout();
+    });
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.selectRows.length > 0) {
+        this.toggleSelect();
+      }
+    });
+
+    // 需求：鼠标右键复制   选中后保存text 在用户右键复制时重新复制内容
+    const that = this;
+    document.oncopy = (e) => {
+      let isTableCopy = false;
+      const path = e.path || [];
+      // 通过e.path的div 追溯是否在table.cell下的元素复制 如果是才出发
+      path.map((item) => {
+        const className = item.className || '';
+        if (className.indexOf('f-table') !== -1) {
+          isTableCopy = true;
+        }
+      });
+      if (isTableCopy) {
+        setTimeout(() => {
+          that.copy();
+        }, 200);
+      }
+    };
+  },
+  methods: {
+    // 排序
+    sortChange({ column, prop, order }) {
+      this.$emit('sortChange', { column, prop, order });
+    },
+
+    // 把列表中已选中的在初始化时选中，但现在只能通过id来选择，如果有需要其他值来判断，把id改为外部传进来的值即可
+    toggleSelect() {
+      const selectIds = map(this.selectRows, this.selectKey);
+      const dataIds = map(this.dataList, this.selectKey);
+      const selectList = [];
+      selectIds.forEach((item) => {
+        const index = dataIds.indexOf(item || String(item));
+        if (index !== -1) {
+          selectList.push(this.dataList[index]);
+        }
+      });
+      selectList.forEach((row) => {
+        this.$comRowChange(row, null);
+        this.$refs.fTable.toggleRowSelection(row, true);
+      });
+    },
+   
+    // 初始化config
+    initCurrentConfig(list) {
+      const newList = list.map((item) => {
+        const newItem = { ...item };
+        if (newItem.tableList && newItem.tableList.length > 0) {
+          newItem.tableList = this.initCurrentConfig(newItem.tableList);
+        }
+        return newItem;
+      });
+      return newList;
+    },
+    // 选中事件触发
+    radioClick(e, row) {
+      if (e.pointerId === 1) {
+        // 防止多次触发
+        this.currentRow = row;
+        this.$emit('current-change', row);
+      }
+    },
+    $comRowChange(currentRow, oldCurrentRow) {
+      this.currentRow = currentRow || {};
+      this.$emit('current-change', currentRow, oldCurrentRow);
+    },
+    // 将选中的状态值抛出去接收
+    $comSelect(selectData, row) {
+      if (!this.checkbox) {
+        return false;
+      }
+      this.selectData = selectData;
+      this.$emit('onSelect', selectData);
+      // 如果外部传入id的key 则高亮选中行
+      if (this.selectKey) {
+        const { data, selectKey } = this;
+        const idList = selectData.map((item) => item[selectKey]);
+        const indexList = [];
+        idList.map((item) => {
+          for (let i = 0; i < data.length; i++) {
+            if (data[i][selectKey] === item) {
+              indexList.push(i);
+              break;
+            }
+          }
+        });
+        this.indexList = indexList;
+      }
+    },
+    // 树形结构处理是否全选
+    splite(data, flag) {
+      data.forEach((row) => {
+        if (row.templateUrl) {
+          this.$refs.fTable.toggleRowSelection(row, flag);
+        } else {
+          this.$refs.fTable.toggleRowSelection(row, false);
+        }
+        if (row[this.treeProps.children] && row[this.treeProps.children][0]) {
+          this.splite(row[this.treeProps.children], flag);
+        }
+      });
+    },
+    // 全选状态将选中的状态值抛出去接收
+    $comSelectAll(selectData, row) {
+      if (!this.checkbox) {
+        return false;
+      }
+      // 处理树形结构全选事件
+      if (this.isTreeStructure) {
+        this.checkedKeys = !this.checkedKeys;
+        this.splite(this.dataList, this.checkedKeys);
+      }
+      this.selectData = selectData;
+      this.$emit('onSelect', selectData);
+      this.$emit('select',selectData, row);
+      // 如果外部传入id的key 则高亮选中行
+      if (this.selectKey) {
+        const { data, selectKey } = this;
+        const idList = selectData.map((item) => item[selectKey]);
+        const indexList = [];
+        idList.map((item) => {
+          for (let i = 0; i < data.length; i++) {
+            if (data[i][selectKey] === item) {
+              indexList.push(i);
+              break;
+            }
+          }
+        });
+        this.indexList = indexList;
+      }
+    },
+    isShowSlots(val) {
+      return this.showSlots.includes(val);
+    },
+
+    // 鼠标按下
+    mousedown() {
+      this.mouseTime = new Date().getTime();
+    },
+    // 鼠标弹起 用于选中复制
+    mouseup() {
+      if (new Date().getTime() - this.mouseTime < 200) {
+        this.listenersStatus = true;
+        this.mouseTime = new Date().getTime();
+      }
+      const txt = window.getSelection
+        ? window.getSelection()
+        : document.selection.createRange().text;
+      this.listenersStatus = txt.isCollapsed;
+      const text = txt?.anchorNode?.data;
+      if (text) {
+        localStorage.copyText = text;
+      }
+    },
+    // 覆盖复制
+    copy() {
+      const copyText = localStorage.copyText;
+      if (copyText) {
+        const textarea = document.createElement('textarea');
+        // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
+        textarea.readOnly = 'readonly';
+        textarea.style.position = 'absolute';
+        textarea.style.left = '-9999px';
+        // 将要 copy 的值赋给 textarea 标签的 value 属性
+        textarea.value = copyText;
+        // 重制copyText
+        localStorage.copyText = '';
+        // 将 textarea 插入到 body 中
+        document.body.appendChild(textarea);
+        // 选中值并复制
+        textarea.select();
+        document.execCommand('Copy');
+        document.body.removeChild(textarea);
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.noLabel ::v-deep.el-radio__label {
+  display: none;
+}
+</style>

ruoyi-ui/src/baseComponents/f-table/table.md

@@ -0,0 +1,249 @@
+# Table 表格
+
+根据配置生成表格，用于表格展示
+**切记 column 的第一个 key 为 el-table-column 的 props。**
+
+## Table Attributes
+
+| 参数           | 说明                                                | 类型    | 可选值 | 默认值   |
+| -------------- | --------------------------------------------------- | ------- | ------ | -------- |
+| data           | 表格数据对象                                        | Array   |        | []       |
+| column         | 表格列配置内容                                      | Array   | -      | []       |
+| showExpand     | 是否具备展开列                                      | Boolean | -      | `false`  |
+| full           | 是否撑满父元素                                      | Boolean | -      | `false`  |
+| showFixed      | 是否固定首行                                        | Boolean | -      | `false`  |
+| checkbox       | 是否展示 checkbox                                   | Boolean | -      | `true`   |
+| selectionProps | selection 操作列添加自定义属性                      | Object  | -      | -        |
+| selectable       | 复选框是否可选择                              | Boolean | -      | `false`  |
+| operationWidth | 操作列的宽度                                        | String  | -      | `'auto'` |
+| showOperation  | 是否显示操作列                                      | Boolean | -      | `false`  |
+| operationLabel  | 操作列文字                                      | String | -      | `操作`  |
+| showSlots      | 插槽 name 数组                                      | Array   | -      | []       |
+| selectKey      | select 选中高亮时需要的 key,checkbox 为`true`时必填 | String  | -      | `'id'`   |
+| summaryCol     | 合计行 colSpan                                      | Number  | -      | `1`      |
+| required       | 是否必填，只适用于样式                                            | Boolean | -      | `false`  |
+| classText       | table外层div自定义class                              | String | -      | -  |
+| highLightCurrentRow       | 单选行                              | Boolean | -      | `false`  |
+| attrs          | 接收 elementTables 中其他属性                       | Order   | -      |
+
+> `column` 的第一个属性 key 为`el-table-column`的`props` > `column` 的每一项都是一个对象
+> 详情见`Column Config` > `full`为 true 时，外部元素必须增加`class="max-area"`
+
+### Table Column Config
+
+`column` 的每一项都是一个对象，表示当前列的配置。
+`column` 的第一个属性 key 为`el-table-column`的`props`,`value`为`label`,切记必须放在第一个
+其主要可选的配置如下：
+
+| 键名       | 说明                                 | 类型          | 示例                                                                                      |
+| ---------- | ------------------------------------ | ------------- | ----------------------------------------------------------------------------------------- |
+| 第一个属性 | **必选**，对应的                     | String        | { name:'姓名' } 其中 `name`会作为 prop， `姓名`为 label                                   |
+| minWidth   | 最小宽度                             | String        | `'100px'`                                                                                 |
+| sortable   | 是否需要排序                         | Boolean       | -                                                                                         |
+| labelCLass | 表头单元格 class                     | String        | 右边白色间距：`'whiteRight'`、左右和下边框`'borderRight'`,`'borderBottom'`,`'borderLeft'` |
+| formatter  | 数据 formatter，需 retrun 格式化数据 | Function(row) | { `name:'姓名'`,`formatter:row=>'你好'+row.name` }                                        |
+| tableList  | 多级表头配置                         | Column        | { `name:'姓名'`,`tableList`:[{`name2`:`'姓名 2'` }]}                                      |
+| attrs      | 接受 el-table-column 其他所有参数    | Any           |
+
+> `column`的第一个`key:value` `key为prop，value为label`，为 column 固定写法
+> `tableList`用于多级表头,内部使用递归组件，可无限级传入
+> `labelClass` 在多级表头前一个元素添加`whiteRight` > `labelClass` 在多级表头内父数组 item 添加`borderBottom borderLeft` 其他视情况添加
+> `attrs` 接受 el-table-column 其他所有参数，如需定制情况可直接添加
+
+## Table Events
+
+| 事件名称 | 说明           | 回调参数                        |
+| -------- | -------------- | ------------------------------- |
+| onSelect | 选择框发生变化 | 当前选中的数据 list(selectData) |
+
+> 每次表格选择发生变化时触发
+
+## Demo
+
+### 基本用法
+
+```html
+<template>
+  <f-table :data="tableData" :column="tableConfig" select-key="id">
+  </f-table>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [
+          {
+            name: '张三',
+            sex: '男',
+            age: '18',
+            id: 1,
+          },
+          {
+            name: '李四',
+            sex: '女',
+            age: '19',
+            id: 2,
+          },
+        ],
+        tableConfig: [
+          { name: '姓名' },
+          { sex: '性别', sortable: true },
+          { age: '年龄', formatter: (row) => row.age + '岁' },
+        ],
+      }
+    },
+  }
+</script>
+<!-- table-basic-usage.vue -->
+```
+
+### 数据插槽用法
+
+```html
+<template>
+  <f-table
+    :data="tableData"
+    :column="tableConfig"
+    :show-slots="['name']"
+    select-key="id"
+  >
+    <template #name="scope">
+      <span>
+        你好，{{ scope.row.name }}
+      </span>
+    </template>
+  </f-table>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [
+          {
+            name: '张三',
+            sex: '男',
+            age: '18',
+            id: 1,
+          },
+          {
+            name: '李四',
+            sex: '女',
+            age: '19',
+            id: 2,
+          },
+        ],
+        tableConfig: [
+          { name: '姓名' },
+          { sex: '性别', sortable: true },
+          { age: '年龄', formatter: (row) => row.age + '岁' },
+        ],
+      }
+    },
+  }
+</script>
+<!-- form-slots-usage.vue -->
+```
+
+### 多级表头用法
+
+```html
+<template>
+  <f-table :data="tableData" :column="tableConfig" select-key="id">
+  </f-table>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [
+          {
+            name: '张三',
+            sex: '男',
+            age: '18',
+            birthYear: '2010',
+            birthMonth: '10',
+            birthDay: '7',
+            id: 1,
+          },
+          {
+            name: '李四',
+            sex: '女',
+            age: '19',
+            birthYear: '2010',
+            birthMonth: '10',
+            birthDay: '7',
+            id: 2,
+          },
+        ],
+        tableConfig: [
+          { name: '姓名' },
+          { sex: '性别', sortable: true },
+          { age: '年龄', formatter: (row) => row.age + '岁' },
+          {
+            birth: '出生年月日',
+            tableList: [
+              { birthYear: '出生年' },
+              { birthYear: '出生月' },
+              { birthYear: '出生日' },
+            ],
+          },
+        ],
+      }
+    },
+  }
+</script>
+<!-- form-Headers-usage.vue -->
+```
+
+### 二维表格用法
+
+```html
+<template>
+  <f-table :data="tableData" :column="tableConfig" is-dis-table> </f-table>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tableData: [
+          {
+            name: '张三',
+            sex: '男',
+            age: '18',
+            birthYear: '2010',
+            birthMonth: '10',
+            birthDay: '7',
+            id: 1,
+            disName: '姓名1',
+          },
+          {
+            name: '李四',
+            sex: '女',
+            age: '19',
+            birthYear: '2010',
+            birthMonth: '10',
+            birthDay: '7',
+            id: 2,
+            disName: '姓名2',
+          },
+        ],
+        tableConfig: [
+          { disName: '二维表格', columnClass: 'hasBg' },
+          { name: '姓名' },
+          { sex: '性别', sortable: true },
+          { age: '年龄', formatter: (row) => row.age + '岁' },
+          {
+            birth: '出生年月日',
+            tableList: [
+              { birthYear: '出生年' },
+              { birthYear: '出生月' },
+              { birthYear: '出生日' },
+            ],
+          },
+        ],
+      }
+    },
+  }
+</script>
+<!-- form-Headers-usage.vue -->
+```

ruoyi-ui/src/baseComponents/f-tabs/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="f-tabs-container">
+    <div :class="`f-tabs-card ${dynamic && 'f-tabs-dynamic'}`">
+      <el-tabs v-model="tabsActive" @tab-click="handleChange">
+        <el-tab-pane
+          v-for="(item, index) in list"
+          :key="index"
+          :name="index.toString()"
+        >
+          <span slot="label">
+            <span>{{ item.label }}</span>
+            <i
+              v-if="dynamic"
+              :class="
+                `f-tabs-icon ${
+                  index ? 'el-icon-remove' : 'el-icon-circle-plus'
+                }`
+              "
+              @click.stop="handleToggle(index ? 'minus' : 'plus', index)"
+            />
+          </span>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FTabs',
+  props: {
+    // tabs 渲染列表
+    list: {
+      type: Array,
+      default: () => []
+    },
+    // 当前选中的 name
+    value: {
+      type: [Number, String],
+      default: 0
+    },
+    // 是否开启动态增减
+    dynamic: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      tabsActive: '0'
+    };
+  },
+  watch: {
+    value(val) {
+      this.tabsActive = val.toString();
+    }
+  },
+  mounted() {
+    this.tabsActive = this.value.toString();
+    this.handleInit();
+  },
+  methods: {
+    handleInit() {
+      // 检索初始化列表长度 赋值唯一下标
+      this.unique_index = this.list.length;
+    },
+    handleChange(event) {
+      this.$emit('input', this.tabsActive * 1);
+      // 选中事件 抛出被选中的标签 tab 实例
+      this.$emit('change', event);
+    },
+    handleToggle(type, index) {
+      // 如果是新增 则唯一下标递增
+      // tab 增加减少事件 抛出增加 plus 减少 minus 的类型 和 当前选中的下标
+      this.$emit('toggle', type, type === 'plus' ? null : parseInt(index));
+    }
+  }
+};
+</script>
+

ruoyi-ui/src/baseComponents/f-tabs/readme.md

@@ -0,0 +1,76 @@
+# Tabs 标签页组件
+
+可支持增加减少的标签页组件
+
+## Tabs Attributes
+
+| 参数    | 说明             | 类型    | 可选值 | 默认值 |
+| ------- | ---------------- | ------- | ------ | ------ |
+| v-model | 当前选中的 index | Number  | -      | 0      |
+| list    | tabs 渲染列表    | Array   | -      | []     |
+| dynamic | 是否开启动态增删 | Boolean | -      | false  |
+
+## List Attributes
+
+`list` 数组中的每个元素都是一个对象，表示一个表单域的配置。
+一部分配置是通用配置，对于不同的类型又有不同的选项可以配置。
+其主要可选的配置如下：
+
+| 键名  | 说明         | 类型   | 示例 |
+| ----- | ------------ | ------ | ---- |
+| label | tab 展示名称 | String | -    |
+
+## Tabs Events
+
+| 事件名称 | 说明                           | 回调参数                                                                                                                    |
+| -------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
+| change   | 选项选中发生改变时触发         | 被选中的标签 tab 实例                                                                                                       |
+| toggle   | tab 动态渲染 开启`dynamic`生效 | type： 当前操作的类型 (枚举值:新增 plus 删除 minus) index： 当前应该删除的下标(下标值新增时返回为 null，只在删除时正确返回) |
+
+## Demo
+
+### 基本用法
+
+```html
+<template>
+  <f-tabs
+    :list="tabs_list"
+    v-model="tabs_active"
+    dynamic
+    @change="handleChange"
+    @toggle="handleToggle"
+  />
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        tabs_active: 0,
+        tabs_list: [
+          {
+            label: '第1单元',
+          },
+          {
+            label: '第2单元',
+          },
+        ],
+      }
+    },
+    methods: {
+      handleChange(event) {},
+      handleToggle(type, index) {
+        if (type === 'plus') {
+          this.tabs_list.push({
+            label: `第${this.tabs_list.length + 1}单元`,
+          })
+        } else {
+          this.tabs_list.splice(index, 1)
+          this.tabs_list = this.tabs_list.map((item, index) => ({
+            label: `第${index + 1}单元`,
+          }))
+        }
+      },
+    },
+  }
+</script>
+```

ruoyi-ui/src/baseComponents/f-tooltip/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="text-tooltip d-flex">
+    <el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top">
+      <p class="over-flow" :class="className" @mouseover="onMouseOver(refName)">
+        <span :ref="refName">{{ content||'-' }}</span>
+      </p>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FTooltip',
+  props: {
+    // 显示的文字内容
+    content: {
+      type: String,
+      default: () => {
+        return '';
+      }
+    },
+    // 外层框的样式，在传入的这个类名中设置文字显示的宽度
+    className: {
+      type: String,
+      default: () => {
+        return '';
+      }
+    },
+    // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
+    refName: {
+      type: String,
+      default: () => {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {
+      isShowTooltip: true
+    };
+  },
+  methods: {
+    onMouseOver(str) {
+      const parentWidth = this.$refs[str].parentNode.offsetWidth;
+      const contentWidth = this.$refs[str].offsetWidth;
+      // 判断是否开启tooltip功能
+      if (contentWidth > parentWidth) {
+        this.isShowTooltip = true;
+      } else {
+        this.isShowTooltip = false;
+      }
+    }
+  }
+};
+</script>

ruoyi-ui/src/baseComponents/index.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+
+Vue.component('f-btn', () => import( /* webpackChunkName: "baseComponents/f-btn" */ './f-btn/index.vue'));
+Vue.component('f-checkbox', () => import( /* webpackChunkName: "baseComponents/f-checkbox" */ './f-checkbox/index.vue'));
+Vue.component('f-datePicker', () => import( /* webpackChunkName: "baseComponents/f-datePicker" */ './f-datePicker/index.vue'));
+Vue.component('f-dialog', () => import( /* webpackChunkName: "baseComponents/f-dialog" */ './f-dialog/index.vue'));
+Vue.component('f-fileUpload', () => import( /* webpackChunkName: "baseComponents/f-fileUpload" */ './f-fileUpload/index.vue'));
+Vue.component('f-form', () => import( /* webpackChunkName: "baseComponents/f-form" */ './f-form/index.vue'));
+Vue.component('f-formTable', () => import( /* webpackChunkName: "baseComponents/f-formTable" */ './f-formTable/index.vue'));
+Vue.component('f-icon', () => import( /* webpackChunkName: "baseComponents/f-icon" */ './f-icon/index.vue'));
+Vue.component('f-input', () => import( /* webpackChunkName: "baseComponents/f-input" */ './f-input/index.vue'));
+Vue.component('f-pagination', () => import( /* webpackChunkName: "baseComponents/f-pagination" */ './f-pagination/index.vue'));
+Vue.component('f-popover', () => import( /* webpackChunkName: "baseComponents/f-popover" */ './f-popover/index.vue'));
+Vue.component('f-radio', () => import( /* webpackChunkName: "baseComponents/f-radio" */ './f-radio/index.vue'));
+Vue.component('f-select', () => import( /* webpackChunkName: "baseComponents/f-select" */ './f-select/index.vue'));
+Vue.component('f-table', () => import( /* webpackChunkName: "baseComponents/f-table" */ './f-table/index.vue'));
+Vue.component('f-tabs', () => import( /* webpackChunkName: "baseComponents/f-tabs" */ './f-tabs/index.vue'));
+Vue.component('f-tooltip', () => import( /* webpackChunkName: "baseComponents/f-tooltip" */ './f-tooltip/index.vue'));

ruoyi-ui/src/baseComponents/readme.md

@@ -0,0 +1,403 @@
+# Form 表单
+
+根据配置生成表单，用于收集、校验数据。
+**该表单支持使用 `v-model` 指令进行数据双向绑定。**
+
+## Form Attributes
+
+| 参数           | 说明                             | 类型    | 可选值                     | 默认值                             |
+| -------------- | -------------------------------- | ------- | -------------------------- | ---------------------------------- |
+| value          | 表单数据对象                     | Object  | -                          | -                                  |
+| disabled       | 是否禁用该表单内的所有组件       | Boolean | -                          | `false`                            |
+| editable       | 是否可编辑，非编辑模式下只显示值 | Boolean | -                          | `true`                             |
+| form-items     | 表单域配置                       | Array   | -                          | -                                  |
+| form-keys      | 表单所有键名，支持多列配置       | Array   | -                          | (默认取所有 `form-items` 中的键名) |
+| disabled-keys  | 禁用的键名                       | Array   | -                          | -                                  |
+| hidden-keys    | 隐藏的表单域                     | Array   | -                          | -                                  |
+| inline         | 行内表单模式                     | Boolean | -                          | `false`                            |
+| label-position | 表单域标签的位置                 | String  | `'right'`/`'left'`/`'top'` | `'right'`                          |
+| label-width    | 表单域标签宽度                   | String  | -                          | `'80px'`                           |
+| label-suffix   | 表单域标签后缀                   | String  | -                          | -                                  |
+| column-gutter  | 多列配置时列间距                 | Number  | -                          | 50                                 |
+
+> `form-keys` 同时支持单列和多列的配置，单列配置的每个元素是一个表单域名称字符串，
+> 多列配置的每个元素都是一个对象，`col` 表示列宽，`keys` 表示该列的所有表单域名称，
+> 示例如下: `[{ col: { span: 12 }, keys: ['a'] }, { col: { span: 12 }, keys: ['b'] }]`
+
+### Form Item Config
+
+`form-items` 数组中的每个元素都是一个对象，表示一个表单域的配置。
+一部分配置是通用配置，对于不同的类型又有不同的选项可以配置。
+其主要可选的配置如下：
+
+| 键名        | 说明                                                                            | 类型                                                        | 示例                                                                         |
+| ----------- | ------------------------------------------------------------------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------- |
+| key         | **必选**，表单域名称                                                            | String                                                      | -                                                                            |
+| type        | **必选**，表单域类型                                                            | String                                                      | text/textarea/combo/radio/checkbox/switcher/time/date/custom                 |
+| label       | 表单域显示的名称                                                                | String                                                      | -                                                                            |
+| default     | 默认值                                                                          | Any                                                         | -                                                                            |
+| rules       | 表单域的校验规则                                                                | Array                                                       | `['required', 'email']`/`[{ required: true, message: '' }]`                  |
+| trigger     | 表单域校验时机。默认为 change，如果是 price 组件，建议使用 blur                 | String                                                      | `'blur'` / `'change'`                                                        |
+| placeholder | 表单域的提示文字                                                                | String                                                      | -                                                                            |
+| props       | 直接传递给组件的选项，*不推荐使用*                                              | Object                                                      | -                                                                            |
+| tips        | 表单项提示信息，显示在输入项之后                                                | String / Function(h, config)                                | -                                                                            |
+| prefix      | **[text]** 输入框的前缀                                                         | String                                                      | -                                                                            |
+| suffix      | **[text]** 输入框的后缀                                                         | String                                                      | -                                                                            |
+| options     | **[combo, radio, checkbox]** 选项列表，每个选项有 value, label 和 disabled 配置 | Array / Object / Function(params)                           | `[{ value: '0', label: '女' }, { value: '1', label: '男', disabled: true }]` |
+| onLabel     | **[switcher]** 开启时的文字                                                     | String                                                      | `'开启'`                                                                     |
+| offLabel    | **[switcher]** 关闭时的文字                                                     | String                                                      | `'关闭'`                                                                     |
+| onValue     | **[switcher]** 开启时的值                                                       | String                                                      | -                                                                            |
+| offValue    | **[switcher]** 关闭时的值                                                       | String                                                      | -                                                                            |
+| render      | **[custom]** 自定义组件的渲染函数                                               | Function(h: Function, decorator: Function(options: Object)) | `(h, decorator) => (<div>{decorator()(<Input />)}</div>)`                    |
+
+> 自定义表单域的 `render` 配置提供了一个 `decorator` 函数，使用该函数包裹支持 `v-model` 指令的组件，
+> 可以方便地将该表单域的数据收集到 form 组件所绑定的数据对象中。
+
+### Form Item Rules Config
+
+表单项支持校验，校验规则 `rules` 为一个对象数组，其中预设了一部分常用校验，可用预设的字符串直接替换对象。
+预设的部分校验规则如下：
+
+| 名称           | 说明                                            | 参数                     | 示例                          |
+| -------------- | ----------------------------------------------- | ------------------------ | ----------------------------- |
+| required       | 是否必填                                        | -                        | -                             |
+| required_price | 是否必填（用于input-price）                     | -                        | -                             |
+| required_array | 是否必填（用于校验数组）                         | -                        | -                             |
+| required_wi    | 是否必填（用于单选window-input）                | -                        | -                             |
+| required_group | 是否必填（用于text、select、date等的group组件） | -                        | -                             |
+| digit          | 数字                                            | -                        | -                             |
+| alphaNum       | 英文字母或数字                                  | -                        | -                             |
+| positiveInt    | 正整数                                          | -                        | -                             |
+| nonNegativeInt | 非负整数                                        | -                        | -                             |
+| noSpecial      | 非特殊字符                                      | -                        | -                             |
+| noCharacter    | 非中文字符                                      | -                        | -                             |
+| stringLength   | 字符串长度                                      | min: 最小值，max: 最大值 | `'stringLength?min=0&max=50'` |
+| desc           | 描述或说明                                      | -                        | -                             |
+| phone          | 手机号                                          | -                        | -                             |
+| email          | 电子邮件                                        | -                        | -                             |
+| idcard         | 身份证号码                                      | -                        | -                             |
+| code           | 编码                                            | -                        | -                             |
+| name           | 名称                                            | -                        | -                             |
+
+> 表单项的校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)。
+
+#### FormItem Type
+
+表单项配置中有一个关键属性 `type` 用来控制表单项渲染出的控件，配置不同类型的 `type` 时支持配置不同的参数，详见下表：
+
+| 类型       | 对应控件       | 支持的配置                           |
+| ---------- | -------------- | ------------------------------------ |
+| text       | 单行文本输入框 | prefix，suffix                       |
+| textarea   | 多行文本输入框 | -                                    |
+| combo      | 下拉单选框     | options                              |
+| comboRange | 下拉单选范围   | options                              |
+| radio      | 单选按钮       | options                              |
+| checkbox   | 复选框         | options                              |
+| switcher   | 滑动开关       | onValue, offValue, onLabel, offLabel |
+| date       | 日期           | -                                    |
+| dateRange  | 日期范围       | -                                    |
+| price      | 价格数字       | -                                    |
+| priceRange | 价格数字区间   | -                                    |
+| custom     | 自定义渲染     | render: Function(decorator)          |
+
+## Form Methods
+
+| 方法名            | 说明                                                                                                                                                                 | 参数                                                              |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
+| validate          | 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise | Function(callback: Function(boolean, object))                     |
+| validateField     | 对部分表单字段进行校验的方法                                                                                                                                         | Function(field: string, callback: Function(errorMessage: string)) |
+| resetFields       | 重置表单，将表单域字段重置为初始值并移除校验效果                                                                                                                     | Function(fields?: string[])                                       |
+| clearFields       | 清空表单域，将表单域字段重置为默认值并移除校验效果, isReset 传入 true 可重置表单初始值                                                                               | Function(fields?: string[], isReset?: boolean)                    |
+| clearValidate     | 移除整个表单的校验效果                                                                                                                                               | -                                                                 |
+| hasModified       | 判断表单或部分表单域是否发生过修改                                                                                                                                   | Function(fields?: string[]): Boolean                              |
+| updateInitialData | 更新表单记录的初始值，用以纠正调用 `resetFields` 时的数据                                                                                                            | Function(data?: object)                                           |
+| setValidateStatus | 设置表单的校验状态                                                                                                                                                   | Function(errors: Object)                                          |
+
+## Form Events
+
+| 事件名称 | 说明                 | 回调参数                                                                        |
+| -------- | -------------------- | ------------------------------------------------------------------------------- |
+| change   | 表单域发生改变时触发 | 表单域键名(key)，表单域的值(value), 是否为初始化阶段(isInitial)，旧值(oldValue) |
+
+> 表单在首次加载时会触发 change 事件，同时提供第三个参数 isInitial 设置为 true。
+
+## Public API
+
+- `SET_FORM_RULES(rules: { [name: string]: object })`
+  设置表单内置校验规则（同时适用于表格组件验证）
+- `SET_FORM_PARSERS(parsers: { [type: string]: (h: Function, params: any, decorator: Function) => VueElement })`
+  设置表单内置类型解析器（同时适用于表格组件）
+
+## Demo
+
+### 基本用法
+
+```html
+<template>
+  <h-form
+    inline
+    v-model="formData"
+    :form-items="formItems"
+  ></h-form>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        formItems: [{
+          key: 'name',
+          type: 'text',
+          label: '姓名',
+          prefix: 'Mrs.',
+          placeholder: '尊名',
+          tips: '您的尊姓大名？',
+          rules: ['required'],
+          props: {
+            width: 200,
+          },
+        }, {
+          key: 'gender',
+          type: 'radio',
+          label: '性别',
+          options: [{ value: '0', label: '女' }, { value: '1', label: '男' }],
+        }],
+        formData: {},
+      };
+    }
+  };
+</script>
+<!-- form-basic-usage.vue -->
+```
+
+### 表单联动
+
+```html
+<template>
+  <div>
+    <div style="width: 800px">
+      <h-form
+        ref="form"
+        v-model="formData"
+        label-width="90px"
+        :form-items="formItems"
+        :form-keys="formKeys"
+        :disabled-keys="disabledKeys"
+        :hidden-keys="hiddenKeys"
+        @change="handleFormChange"
+      ></h-form>
+      <Button v-shortcut="'global.confirm'" @click="handleSubmit">
+        提交
+      </Button>
+      <Button @click="handleReset">
+        重置
+      </Button>
+      <Button @click="handleClear">
+        清空
+      </Button>
+      <Button @click="handleSetValidate">
+        设置校验
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Input, Button } from 'element-ui';
+
+function getFormItems() {
+  return [{
+    key: 'name',
+    label: '姓名',
+    type: 'text',
+    placeholder: '报上名来！',
+    rules: ['required'],
+    props: {
+      attrs: {
+        size: 'mini',
+      },
+      style: {
+        width: '100px',
+      },
+    },
+  }, {
+    key: 'gender',
+    label: '性别',
+    type: 'radio',
+    // default: '0',
+    options: [{
+      value: '0',
+      label: '女',
+      isDefault: true,
+    }, {
+      value: '1',
+      label: '男'
+    }],
+  }, {
+    key: 'age',
+    label: '年龄',
+    type: 'custom',
+    rules: ['required'],
+    render(h, decorator) {
+      return (
+        <div>
+          {decorator()(
+            <h-input type="numInput" width="60px" />
+          )}
+        </div>
+      );
+    },
+  }, {
+    key: 'city',
+    label: '城市',
+    type: 'checkbox',
+    options: [{
+      value: 'shanghai',
+      label: '上海',
+    }, {
+      value: 'beijing',
+      label: '北京',
+    }, {
+      value: 'guangzhou',
+      label: '广州',
+    }, {
+      value: 'shenzhen',
+      label: '深圳',
+      disabled: true,
+    }],
+    // default: 'shanghai',
+    rules: [{ required: true, type: 'array' }],
+    props: {
+      style: { width: '160px' },
+    },
+  }, {
+    key: 'relocate',
+    type: 'checkbox',
+    offValue: '1',
+    options: {
+      value: '2',
+      label: '接受组织安排',
+    },
+    style: {
+      marginTop: '-15px',
+    },
+  }, {
+    key: 'price',
+    label: '价格',
+    type: 'price',
+    // default: '0',
+    // trigger: 'blur',
+    rules: ['required_price', 'positive'],
+  }, {
+    key: 'dateOrRange',
+    type: 'group',
+    title: '出售时间',
+    mode: 'single',
+    default: 'date',
+    items: [{
+      key: 'date',
+      type: 'date',
+      label: '日期',
+      placeholder: '请选择日期',
+      rules: ['required'],
+    }, {
+      key: 'dateRange',
+      type: 'dateRange',
+      label: '时间段',
+    }],
+  }, {
+    key: 'hasEmail',
+    label: '开启邮箱',
+    type: 'switcher',
+  }, {
+    key: 'email',
+    label: '邮箱',
+    type: 'text',
+    rules: ['email', 'required'],
+    style: {
+      marginBottom: '10px',
+    }
+  }];
+};
+
+export default {
+  name: 'ex-form',
+
+  components: { Button },
+
+  data() {
+    return {
+      formItems: getFormItems.call(this),
+      formKeys: [{
+        col: { xs: { span: 24 }, md: { span: 8 } },
+        keys: ['name', 'gender', 'age', 'city', 'relocate'],
+      }, {
+        col: { xs: { span: 24 }, md: { span: 16 } },
+        keys: ['price', 'dateOrRange', 'hasEmail', 'email'],
+      }],
+      formData: {
+        name: 'Lucy',
+        // city: ['shanghai', 'beijing'],
+      },
+      disabledKeys: [],
+      hiddenKeys: [],
+    };
+  },
+
+  methods: {
+    handleFormChange(key, value, isInitial, oldValue) {
+      
+      switch (key) {
+        // 表单联动 启用/禁用
+        case 'gender':
+          if (value === '0') {
+            this.disabledKeys.push('age');
+          } else {
+            this.disabledKeys = this.disabledKeys.filter(key => key !== 'age');
+          }
+          break;
+        // 表单联动 显示/隐藏
+        case 'hasEmail':
+          if (value === '1') {
+            this.hiddenKeys = this.hiddenKeys.filter(k => k !== 'email');
+          } else {
+            this.hiddenKeys.push('email');
+          }
+          break;
+        default:
+          break;
+      }
+    },
+
+    handleSubmit() {
+      this.$refs.form.validate((isValid) => {
+        if (!isValid) return;
+        this.$refs.form.updateInitialData();
+        
+      });
+    },
+
+    handleReset() {
+      this.$refs.form.resetFields();
+    },
+
+    handleClear() {
+      if (this.$refs.form.hasModified()) {
+        this.$confirmSave({
+          message: '数据已修改，是否保存？',
+          onDrop: () => this.$refs.form.clearFields(),
+        });
+      } else {
+        this.$refs.form.clearFields();
+      }
+    },
+
+    handleSetValidate() {
+      this.$refs.form.setValidateStatus({
+        name: '名字太长！',
+      });
+    },
+  },
+}
+</script>
+<!-- form-advanced-usage.vue -->
+```

ruoyi-ui/src/comComponents/tableList/index.vue

@@ -0,0 +1,91 @@
+<!--
+ * @Author: 傅豪杰 18516149270@163.com
+ * @Date: 2023-05-17 17:16:28
+ * @LastEditors: 傅豪杰 18516149270@163.com
+ * @LastEditTime: 2023-05-31 16:23:16
+ * @FilePath: /online-manager-front/src/comComponents/tableList/index.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+    <div>
+        <f-table
+            v-bind="{...$attrs}"
+            :data="tableData"
+            v-on="$listeners"
+        >
+            <template slot="default" slot-scope="scope">
+                <slot v-bind="scope" name="default" />
+            </template>
+            
+            <template
+                v-for="slotsItem in tableSlots"
+                :slot="slotsItem"
+                slot-scope="scope"
+            >
+                <slot v-bind="scope" :name="slotsItem" />
+            </template>
+        </f-table>
+        <!-- 分页器 -->
+        <f-pagination :page="page" :total="total" @change="pageChange" />
+    </div>
+  </template>
+  
+  <script>
+  
+  export default {
+    name: "TableList",
+    props:{
+        // 列表请求方法
+        getList:{
+            type:Function,
+            default:function(page){}
+        },
+        pageParams:{
+            type: String,
+            default: 'current'
+        },
+        sizeParams:{
+            type: String,
+            default: 'size'
+        }
+    },
+    data() {
+        return {
+            // 列表数据
+            tableData:[],
+            // 分页器设置
+            page: {
+                pageNo: 1,
+                pageSize: 20,
+            },
+            // 分页总数
+            total:0,
+        };
+    },
+    computed:{
+        tableSlots(){
+            return this.$attrs.showSlots || [];
+        }
+    },
+    methods: {
+        // 分页器方法
+        async pageChange(newPage) {
+            this.page = { ...newPage };
+            this.handleQueryList()
+        },
+        async handleQueryList(){
+            const {pageNo,pageSize} = this.page
+            const params = {
+                [this.sizeParams] : pageSize,
+                [this.pageParams] : pageNo
+            }
+            const listData = await this.getList(params);
+            this.tableData = listData.records || [];
+            this.total = listData.total
+            this.tableDataKey++;
+        }
+    },
+  };
+  </script>
+  
+  

ruoyi-ui/src/main.js

@@ -37,6 +37,12 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+// 基础组件库
+import '@/baseComponents/index.js'
+// 动态布局组件库
+import VueGridLayout from 'vue-grid-layout';
+// 时间格式化工具
+import dayjs from "dayjs"
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -48,6 +54,7 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
+Vue.prototype.dayjs = dayjs
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
@@ -57,6 +64,8 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('GridLayout', VueGridLayout.GridLayout)
+Vue.component('GridItem', VueGridLayout.GridItem)
 
 Vue.use(directive)
 Vue.use(plugins)

ruoyi-ui/src/mixins/formMixins.js

@@ -0,0 +1,26 @@
+/*
+ * @Author: fhj
+ * @LastEditors: fhj
+ * @Description: 
+ */
+export default {
+  props:{
+    // disabled
+    disabled:{
+      type:[Function,Boolean],
+      default:false
+    }
+  },
+  computed: {
+    isDisabled(){
+      if( typeof this.disabled === 'function'){
+        return this.disabled();
+      }
+      return this.disabled;
+    }
+  },
+
+  methods: {
+  
+  }
+};

ruoyi-ui/src/mock/btnList.js

@@ -0,0 +1,38 @@
+export const btnList = [
+  {
+    text: '温度'
+  },
+  { 
+    text: '开关'
+  },
+  {
+    text: '+'
+  },
+  {
+    text: '-'
+  },
+  {
+    text: '温度'
+  },
+  { 
+    text: '开关'
+  },
+  {
+    text: '+'
+  },
+  {
+    text: '-'
+  },
+  {
+    text: '温度'
+  },
+  { 
+    text: '开关'
+  },
+  {
+    text: '+'
+  },
+  {
+    text: '-'
+  }
+]

ruoyi-ui/src/router/index.js

@@ -87,7 +87,22 @@ export const constantRoutes = [
         meta: { title: '个人中心', icon: 'user' }
       }
     ]
+  },
+  {
+    path: '/code',
+    component: Layout,
+    hidden: true,
+    redirect: 'noredirect',
+    children: [
+      {
+        path: '',
+        component: () => import('@/views/code'),
+        name: 'Code',
+        meta: { title: '二维码管理', icon: 'code' }
+      }
+    ]
   }
+  
 ]
 
 // 动态路由，基于用户权限动态去加载
@@ -177,7 +192,7 @@ Router.prototype.replace = function push(location) {
 }
 
 export default new Router({
-  mode: 'history', // 去掉url中的#
+  mode: 'hash', // 去掉url中的#
   scrollBehavior: () => ({ y: 0 }),
   routes: constantRoutes
 })

ruoyi-ui/src/views/base/addBase/blocks/detailDialog.vue

@@ -0,0 +1,162 @@
+<template>
+  <!-- 列表选择弹窗 -->
+  <f-dialog
+    ref="dialog"
+    title="基础库配置信息"
+    :initData="handleInitData"
+    :isDetermine="dialogType!=='detail'"
+    :beforeClose="handleBeforeClose"
+    width="1100px"
+  >
+    <template #contain>
+      <f-form
+        ref="ruleForm"
+        :form="fromData"
+        :disabled="dialogType==='detail'"
+        :config="fromDataConfig"
+        :rules="fromRules"
+        label-position="left"
+        :column="2"
+        :key="fromKey"
+      />
+    </template>
+  </f-dialog>
+</template>
+<script>
+import { addBaseApi } from '@/api/base/addBase'
+
+export default {
+  name: "DetailDialog",
+  props: {
+    // 表单数据
+    rowData:{
+      type:Object,
+      default:()=>{}
+    },
+    // 表单类型 add detail edit
+    dialogType:{
+      type:String,
+      default:'add'
+    }
+  },
+  data() {
+    return {
+      // 数据对象
+      fromData:{
+      },
+      // 表单配置
+      fromDataConfig:[
+          {
+            itemType: "input",
+            prop: "name",
+            label:'基础库名',
+            attrs: {
+              placeholder: "请输入基础库名"
+            },
+          },
+          {
+            itemType: "input",
+            prop: "bandValue",
+            label:'波段值',
+            attrs: {
+              inputType:'Number',
+              placeholder: "请输入波段值，默认38000"
+            },
+          },
+          {
+            itemType: "input",
+            prop: "bootCode",
+            label:'引导码',
+            attrs: {
+              placeholder: "请输入引导码"
+            },
+          },
+          {
+            itemType: "input",
+            prop: "bootCodeSend",
+            label:'引导码发送次数',
+            attrs: {
+              inputType:'Number',
+              placeholder: "请输入引导码发送次数"
+            },
+          },
+          {
+            itemType: "input",
+            prop: "dateCode",
+            label:'数据码',
+            attrs: {
+              placeholder: "请输入数据码",
+              span:2,
+              type:'textarea'
+            },
+          },
+          {
+            itemType: "input",
+            prop: "overCode",
+            label:'结束码',
+            attrs: {
+              placeholder: "请输入结束码"
+            },
+          }
+      ],
+      // 表单验证
+      fromRules:{
+          name:[{required: true, message: '请输入基础库名'}],
+          bootCode:[{required: true, message: '请输入引导码'}],
+          bootCodeSend:[{required: true, message: '请输入引导码发送次数'}],
+          dateCode:[{required: true, message: '请输入数据码'}],
+          overCode:[{required: true, message: '请输入结束码'}]
+      },
+      // 表单key
+      fromKey:0
+    };
+  },
+  methods: {
+    // 显示弹窗
+    show(){
+      this.$refs.dialog.show();
+    },
+    // 初始化表单数据
+    initFormData(fromData){
+      this.fromData = {
+          content:'',
+          ...fromData
+      }
+      this.fromKey++;
+    },
+    // 详情
+    async handleInitData(){
+      const {dialogType,rowData} = this;
+      if(dialogType === 'add') return this.initFormData({})
+      // 调接口获取详情
+      const res = await addBaseApi.configDetail({ id: rowData.id });
+      if(res.code != 200) return this.initFormData({})
+      const from = { ...res.data }
+      this.initFormData(from);
+    },
+    // 关闭之前回调.
+    async handleBeforeClose(type){
+      if(type !='ok') return true;
+      const validate = await this.$refs.ruleForm.validate();
+
+      if(!validate) return false;
+      const params = {
+        ...this.fromData,
+        // bandValue: Number(this.fromData.bandValue),
+        // bootCodeSend: Number(this.fromData.bootCodeSend)
+      }
+      //  调接口更新数据
+      const res = await addBaseApi.configAddOrEdit(params);
+      if(res.code !=200){
+          this.$modal.msgError(res.msg);
+          return false;
+      }
+
+      this.$emit('updateList')
+      this.initFormData({})
+      return true;
+    }
+  }
+}
+</script>
+<style scoped lang="scss"></style>

ruoyi-ui/src/views/base/addBase/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="app-container">
+    <el-form :model="form" ref="form" size="small" :inline="true" label-position="left" label-width="70px">
+      <el-form-item>
+          <el-input v-model="form.label" placeholder="请输入" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleCurrentGetList">查询</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleOpenDialog('add', {})">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <tableList
+      ref="table"
+      :column="tableConfig"
+      showOperation
+      operationWidth="100px"
+      :checkbox="false"
+      :getList="handleGetList"
+    >
+      <!-- 列表操作页 -->
+      <template #default="scope">
+        <!-- 已生效只能看详情 -->
+        <f-btn type="text" @click="handleOpenDialog('edit',scope.row)">编辑</f-btn>
+        <f-btn type="delete" @click="handleDelete('del', scope.row)">删除</f-btn>
+      </template>
+    </tableList>
+    <!-- 详情弹窗 -->
+    <detail-dialog 
+      ref="detailDialog" 
+      :rowData="rowData" 
+      :dialogType="dialogType" 
+      @updateList="handleCurrentGetList"
+    />
+  </div>
+</template>
+<script>
+import DetailDialog from './blocks/detailDialog.vue';
+import tableList from "@/comComponents/tableList";
+import { addBaseApi } from '@/api/base/addBase'
+
+// 下拉框选项
+const useStatus = [
+  { name: '使用中', value: '1' },
+  { name: '未使用', value: '0' }
+];
+
+export default {
+  components: { DetailDialog, tableList },
+  data() {
+    return {
+      form: {
+        label: ''
+      },
+      tableConfig: [
+        { "name": "基础库名" },
+        { "bandValue": "波段值" },
+        { "bootCode": "引导码" },
+        { "bootCodeSend": "引导码发送次数"},
+        { "dateCode": "数据码" },
+        { "overCode": "结束码" },
+        { "status": "状态", formatter: row => this.selectDictLabel(useStatus, row.status)},
+        { "createTime": "创建时间", formatter:row => this.dayjs(row.createTime).format("YYYY-MM-DD HH:mm")}
+      ],
+      // 弹窗数据对象
+      rowData:{},
+      // 弹窗类型
+      dialogType:'add',
+      // 弹窗更新key
+      dialogKey:0
+    }
+  },
+  methods: {
+    selectDictLabel(listObj, key) {
+      return listObj.find(item => item.value == key).name
+    },
+    // 查询列表
+    handleCurrentGetList(){
+      this.$refs.table.handleQueryList();
+    },
+    // 获取列表
+    async handleGetList(page) {
+      const res = await addBaseApi.getList(
+        {
+          ...page,
+          name:this.form.label
+        }
+      );
+      if(res.code!= 200 ) return {
+        current:1,
+        records:[],
+        total:0
+      }
+      return res.data;
+    },
+    // 打开详情、编辑\新增弹窗事件
+    handleOpenDialog(type, rowData) {
+      console.log(type, rowData, '当前数据列项！')
+      this.dialogType = type;
+      this.rowData = {...rowData};
+      this.$nextTick(()=>{
+        this.$refs.detailDialog.show();
+      })
+    },
+    // 编辑状态
+    handleDelete(type, row){
+      this.$modal.confirm('是否确认删除此配置').then(async ()=> {
+        const res = await addBaseApi.configDelete({ id: row.id });
+        if(res.code != 200){
+          this.$modal.msgErrpr(res.msg || "操作失败");
+          return false;
+        }
+        this.handleCurrentGetList();
+        this.$modal.msgSuccess("操作成功");
+      })
+    }
+  },
+  mounted() {
+    this.handleCurrentGetList()
+  },
+}
+</script>
+<style lang="scss" scoped>
+</style>

ruoyi-ui/src/views/code/blocks/detailDialog.vue

@@ -0,0 +1,120 @@
+<template>
+  <!-- 列表选择弹窗 -->
+  <f-dialog
+    ref="dialog"
+    title="二维码配置信息"
+    :initData="handleInitData"
+    :isDetermine="dialogType!=='detail'"
+    :beforeClose="handleBeforeClose"
+    width="1100px"
+  >
+    <template #contain>
+      <f-form
+        ref="ruleForm"
+        :form="fromData"
+        :disabled="dialogType==='detail'"
+        :config="fromDataConfig"
+        :rules="fromRules"
+        label-position="left"
+        :column="2"
+        :key="fromKey"
+      />
+    </template>
+  </f-dialog>
+</template>
+<script>
+import { codeApi } from '@/api/code'
+
+export default {
+  name: "DetailDialog",
+  props: {
+    // 表单数据
+    rowData:{
+      type:Object,
+      default:()=>{}
+    },
+    // 表单类型 add detail edit
+    dialogType:{
+      type:String,
+      default:'add'
+    }
+  },
+  data() {
+    return {
+      // 数据对象
+      fromData:{
+      },
+      // 表单配置
+      fromDataConfig:[
+        {
+          itemType: "input",
+          prop: "name",
+          label:'二维码名称',
+          attrs: {
+              placeholder: "请输入二维码名称"
+          },
+        },
+        {
+          itemType: "input",
+          prop: "url",
+          label:'二维码链接',
+          attrs: {
+              placeholder: "请输入二维码链接"
+          },
+        }
+      ],
+      // 表单验证
+      fromRules:{
+          name:[{required: true, message: '请输入二维码名称'}],
+          url:[{required: true, message: '请输入二维码链接'}]
+      },
+      // 表单key
+      fromKey:0
+    };
+  },
+  methods: {
+    // 显示弹窗
+    show(){
+      this.$refs.dialog.show();
+    },
+    // 初始化表单数据
+    initFormData(fromData){
+      this.fromData = {
+          content:'',
+          ...fromData
+      }
+      this.fromKey++;
+    },
+    // 详情
+    async handleInitData(){
+      const {dialogType,rowData} = this;
+      if(dialogType === 'add') return this.initFormData({})
+      // 调接口获取详情
+      const res = await codeApi.configDetail({ id: rowData.id });
+      if(res.code != 200) return this.initFormData({})
+      const from = { ...res.data }
+      this.initFormData(from);
+    },
+    // 关闭之前回调.
+    async handleBeforeClose(type){
+      if(type !='ok') return true;
+      const validate = await this.$refs.ruleForm.validate();
+      if(!validate) return false;
+      const params = {
+          ...this.fromData
+      }
+      //  调接口更新数据
+      const res = await codeApi.configAddOrEdit(params);
+      if(res.code !=200){
+          this.$modal.msgError(res.msg);
+          return false;
+      }
+
+      this.$emit('updateList')
+      this.initFormData({})
+      return true;
+    }
+  }
+}
+</script>
+<style scoped lang="scss"></style>

ruoyi-ui/src/views/code/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="app-container">
+    <el-form :model="form" ref="form" size="small" :inline="true" label-position="left" label-width="70px">
+      <el-form-item>
+          <el-input v-model="form.label" placeholder="请输入" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleCurrentGetList">查询</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleOpenDialog('add', {})">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <tableList
+      ref="table"
+      :column="tableConfig"
+      showOperation
+      operationWidth="200px"
+      :checkbox="false"
+      :getList="handleGetList"
+    >
+      <!-- 列表操作页 -->
+      <template #default="scope">
+        <!-- 已生效只能看详情 -->
+        <f-btn type="text" @click="handleOpenDialog('edit',scope.row)">编辑</f-btn>
+        <f-btn type="delete" @click="handleDelete('del', scope.row)">删除</f-btn>
+      </template>
+    </tableList>
+    <!-- 详情弹窗 -->
+    <detail-dialog 
+      ref="detailDialog" 
+      :rowData="rowData" 
+      :dialogType="dialogType" 
+      @updateList="handleCurrentGetList"
+    />
+  </div>
+</template>
+<script>
+import { codeApi } from '@/api/code'
+import DetailDialog from './blocks/detailDialog.vue';
+import tableList from "@/comComponents/tableList";
+
+// 下拉框选项
+const useStatus = [
+  { name: '使用中', value: '1' },
+  { name: '未使用', value: '0' }
+];
+
+export default {
+  components: { DetailDialog, tableList },
+  data() {
+    return {
+      form: {
+        label: ''
+      },
+      tableConfig: [
+        { name: "二维码名称" },
+        { url: "二维码链接" },
+        { statu: "状态", formatter: row => this.selectDictLabel(useStatus, row.status)},
+        { createTime: "创建时间", formatter:row => this.dayjs(row.createTime).format("YYYY-MM-DD HH:mm")}
+      ],
+      // 弹窗数据对象
+      rowData:{},
+      // 弹窗类型
+      dialogType:'add',
+      // 弹窗更新key
+      dialogKey:0
+    }
+  },
+  methods: {
+    selectDictLabel(listObj, key) {
+      return listObj.find(item => item.value == key).name
+    },
+    // 查询列表
+    handleCurrentGetList(){
+      this.$refs.table.handleQueryList();
+    },
+    // 获取列表
+    async handleGetList(page) {
+      const res = await codeApi.getList(
+        {
+          ...page,
+          name:this.form.label
+        }
+      );
+      if(res.code!= 200 ) return {
+        current:1,
+        records:[],
+        total:0
+      }
+      return res.data;
+    },
+    // 打开详情、编辑\新增弹窗事件
+    handleOpenDialog(type, rowData) {
+      console.log(type, rowData, '当前数据列项！')
+      this.dialogType = type;
+      this.rowData = {...rowData};
+      this.$nextTick(()=>{
+        this.$refs.detailDialog.show();
+      })
+    },
+    // 编辑状态
+    handleDelete(type, row){
+      this.$modal.confirm('是否确认删除此配置').then(async ()=> {
+        const res = await codeApi.configDelete({ id: row.id });
+        if(res.code != 200){
+          this.$modal.msgErrpr(res.msg || "操作失败");
+          return false;
+        }
+        this.handleCurrentGetList();
+        this.$modal.msgSuccess("操作成功");
+      })
+    }
+  },
+  mounted() {
+    this.handleCurrentGetList()
+  },
+}
+</script>
+<style lang="scss" scoped>
+</style>

ruoyi-ui/src/views/login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">若依后台管理系统</h3>
+      <h3 class="title">{{ title }}</h3>
       <el-form-item prop="username">
         <el-input
           v-model="loginForm.username"
@@ -54,10 +54,6 @@
         </div>
       </el-form-item>
     </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
-    </div>
   </div>
 </template>
 
@@ -72,8 +68,8 @@ export default {
     return {
       codeUrl: "",
       loginForm: {
-        username: "admin",
-        password: "admin123",
+        username: "",
+        password: "",
         rememberMe: false,
         code: "",
         uuid: ""
@@ -92,7 +88,8 @@ export default {
       captchaEnabled: true,
       // 注册开关
       register: false,
-      redirect: undefined
+      redirect: undefined,
+      title: process.env.VUE_APP_TITLE
     };
   },
   watch: {

ruoyi-ui/src/views/register.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="register">
     <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
-      <h3 class="title">若依后台管理系统</h3>
+      <h3 class="title">遥控器后台管理系统</h3>
       <el-form-item prop="username">
         <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
           <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />

ruoyi-ui/src/views/template/addButton/blocks/config.js

@@ -0,0 +1,72 @@
+const formConfig = function(){
+  return [
+    {
+      itemType: "input",
+      prop: "name",
+      label:'按钮名称',
+      attrs: {
+        placeholder: "请输入按钮名称"
+      },
+    },
+    {
+      itemType: "select",
+      prop: "typeNum",
+      label:'按钮类型',
+      attrs: {
+        list: this.btnType    
+      }
+    },
+    {
+      itemType: "input",
+      prop: "addSubMax",
+      label:'最大值',
+      attrs: {
+        placeholder: "加减型，请输入最大值",
+      },
+    },
+    {
+      itemType: "input",
+      prop: "addSubMin",
+      label:'最小值',
+      attrs: {
+        placeholder: "加减型，请输入最小值",
+      },
+    },
+    {
+      itemType: "input",
+      prop: "dictateParameter",
+      label:'命令参数',
+      attrs: {
+        placeholder: "请输入命令参数"
+      },
+    },
+    {
+      itemType: "input",
+      prop: "defValue",
+      label:'默认值',
+      attrs: {
+        placeholder: "请输入默认值"
+      },
+    },
+    {
+      itemType: "input",
+      prop: "repeatCode",
+      label:'重复码',
+      attrs: {
+        placeholder: "请输入重复码"
+      },
+    },
+    {
+      itemType: "select",
+      prop: "baseId",
+      label:'基础库',
+      attrs: {
+        list: this.allBase
+      }
+    }
+  ]
+}
+
+export {
+  formConfig
+}

ruoyi-ui/src/views/template/addButton/blocks/detailDialog.vue

@@ -0,0 +1,128 @@
+<template>
+  <!-- 列表选择弹窗 -->
+  <f-dialog
+    ref="dialog"
+    title="基础库配置信息"
+    :initData="handleInitData"
+    :isDetermine="dialogType!=='detail'"
+    :beforeClose="handleBeforeClose"
+    width="1100px"
+  >
+    <template #contain>
+      <f-form
+        ref="ruleForm"
+        :form="fromData"
+        :disabled="dialogType==='detail'"
+        :config="fromDataConfig"
+        :rules="fromRules"
+        label-position="left"
+        :column="2"
+        :key="fromKey"
+      />
+    </template>
+  </f-dialog>
+</template>
+<script>
+import { addButtonApi } from '@/api/template/addButton'
+import { formConfig } from './config'
+export default {
+  name: "DetailDialog",
+  props: {
+    // 表单数据
+    rowData:{
+      type:Object,
+      default: () => ({})
+    },
+    // 表单类型 add detail edit
+    dialogType:{
+      type:String,
+      default:'add'
+    },
+    btnType: {
+      type: Array,
+      default: () => []
+    },
+    allBase: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      // 数据对象
+      fromData:{
+        typeNum: ''
+      },
+      // 表单配置
+      fromDataConfig:[],
+      // 表单验证
+      fromRules:{
+        name:[{required: true, message: '请输入按钮名称'}],
+        typeNum:[{required: true, message: '请选择按钮类型'}],
+        dictateParameter:[{required: true, message: '请输入命令参数'}],
+        defValue:[{required: true, message: '请输入默认值'}],
+        repeatCode:[{required: true, message: '请输入重复码'}]
+      },
+      // 表单key
+      fromKey:0
+    };
+  },
+  methods: {
+    // 显示弹窗
+    show(){
+      this.fromDataConfig = formConfig.call(this)
+      this.$refs.dialog.show();
+    },
+    // 初始化表单数据
+    initFormData(fromData){
+      this.fromData = {
+          content:'',
+          ...fromData
+      }
+      this.fromKey++;
+    },
+    // 详情
+    async handleInitData(){
+      const {dialogType,rowData} = this;
+      if(dialogType === 'add') return this.initFormData({})
+      // 调接口获取详情
+      const res = await addButtonApi.configDetail({ id: rowData.id });
+      if(res.code != 200) return this.initFormData({})
+      const from = { ...res.data, baseId: res.data.baseId?.toString() }
+      this.initFormData(from);
+    },
+    // 关闭之前回调.
+    async handleBeforeClose(type){
+      if(type !='ok') return true;
+      const validate = await this.$refs.ruleForm.validate();
+
+      if(!validate) return false;
+      const params = {
+          ...this.fromData,
+          baseId: Number(this.fromData.baseId)
+      }
+      //  调接口更新数据
+      const res = await addButtonApi.configAddOrEdit(params);
+      if(res.code !=200){
+          this.$modal.msgError(res.msg);
+          return false;
+      }
+
+      this.$emit('updateList')
+      this.initFormData({})
+      return true;
+    }
+  },
+  computed: {
+    resultRules() {
+      if(this.fromData.typeNum != '0') return this.fromRules
+      return  {
+        ...this.fromRules,  
+        addSubMax:[{required: true, message: '加减型，请输入最大值'}],
+        addSubMin:[{required: true, message: '加减型，请输入最小值'}]
+      }
+    }
+  }
+}
+</script>
+<style scoped lang="scss"></style>

ruoyi-ui/src/views/template/addButton/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="app-container">
+    <el-form :model="form" ref="form" size="small" :inline="true" label-position="left" label-width="70px">
+      <el-form-item>
+          <el-input v-model="form.label" placeholder="请输入" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleCurrentGetList">查询</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleOpenDialog('add', {})">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <tableList
+      ref="table"
+      :column="tableConfig"
+      showOperation
+      operationWidth="100px"
+      :checkbox="false"
+      :getList="handleGetList"
+    >
+      <!-- 列表操作页 -->
+      <template #default="scope">
+        <!-- 已生效只能看详情 -->
+        <f-btn type="text" @click="handleOpenDialog('edit',scope.row)">编辑</f-btn>
+        <f-btn type="delete" @click="handleDelete('del', scope.row)">删除</f-btn>
+      </template>
+    </tableList>
+    <!-- 详情弹窗 -->
+    <detail-dialog 
+      ref="detailDialog" 
+      :rowData="rowData" 
+      :dialogType="dialogType" 
+      :btnType="btnType"
+      :allBase="allBase"
+      @updateList="handleCurrentGetList"
+    />
+  </div>
+</template>
+<script>
+import DetailDialog from './blocks/detailDialog.vue';
+import tableList from "@/comComponents/tableList";
+import { addButtonApi } from '@/api/template/addButton'
+import { addBaseApi } from '@/api/base/addBase'
+
+// 下拉框选项
+const useStatus = [
+  { name: '使用中', value: '1' },
+  { name: '未使用', value: '0' }
+];
+
+const btnType = [
+  { name: '开关型', value: '1' },
+  { name: '加减型', value: '0' }
+]
+
+export default {
+  components: { DetailDialog, tableList },
+  data() {
+    return {
+      form: {
+        label: ''
+      },
+      tableConfig: [
+        { "name": "按钮名称" },
+        { "typeNum": "按钮类型", formatter: row => this.selectDictLabel(btnType, row.typeNum) },
+        { "addSubMax": "最大值" },
+        { "addSubMin": "最小值"},
+        { "dictateParameter": "命令参数" },
+        { "defValue": "默认值" },
+        { "repeatCode": "重复码" },
+        { "status": "状态", formatter: row => this.selectDictLabel(useStatus, row.status)},
+        { "createTime": "创建时间", formatter:row => this.dayjs(row.createTime).format("YYYY-MM-DD HH:mm")}
+      ],
+      // 弹窗数据对象
+      rowData:{},
+      // 弹窗类型
+      dialogType:'add',
+      // 弹窗更新key
+      dialogKey:0,
+      btnType,
+      allBase: []
+    }
+  },
+  methods: {
+    selectDictLabel(listObj, key) {
+      return listObj.find(item => item.value == key).name
+    },
+    // 查询列表
+    handleCurrentGetList(){
+      this.$refs.table.handleQueryList();
+    },
+    // 获取列表
+    async handleGetList(page) {
+      const res = await addButtonApi.getList(
+        {
+          ...page,
+          name:this.form.label
+        }
+      );
+      if(res.code!= 200 ) return {
+        current:1,
+        records:[],
+        total:0
+      }
+      return res.data;
+    },
+    // 打开详情、编辑\新增弹窗事件
+    handleOpenDialog(type, rowData) {
+      console.log(type, rowData, '当前数据列项！')
+      this.dialogType = type;
+      this.rowData = {...rowData};
+      this.$nextTick(()=>{
+        this.$refs.detailDialog.show();
+      })
+    },
+    // 编辑状态
+    handleDelete(type, row){
+      this.$modal.confirm('是否确认删除此配置').then(async ()=> {
+        const res = await addButtonApi.configDelete({ id: row.id });
+        if(res.code != 200){
+          this.$modal.msgErrpr(res.msg || "操作失败");
+          return false;
+        }
+        this.handleCurrentGetList();
+        this.$modal.msgSuccess("操作成功");
+      })
+    }
+  },
+  async created() {
+    const res = await addBaseApi.getAllList();
+    if(res.code!= 200 ) return { current:1, records:[], total:0 }
+    this.allBase = res.data.map(item => ({ name: item.name, value: item.id.toString() }))
+  },
+  mounted() {
+    this.handleCurrentGetList()
+  },
+}
+</script>
+<style lang="scss" scoped>
+</style>

ruoyi-ui/src/views/template/addTemplate/blocks/config.js

@@ -0,0 +1,125 @@
+const btnType = [
+  { name: '开关型', value: '1' },
+  { name: '加减型', value: '0' }
+]
+
+const formConfig = function(){
+  return [
+    {
+      itemType: "input",
+      prop: "name",
+      label:'模版名称',
+      attrs: {
+          placeholder: "请输入模版名称"
+      }
+    },
+    {
+      itemType: "select",
+      prop: "status",
+      label:'状态',
+      attrs: {
+          list: this.useStatus    
+      }
+    },
+    {
+      itemType: "select",
+      prop: "baseId",
+      label:'基础库',
+      attrs: {
+        list: this.allBase
+      }
+    }
+  ]
+}
+
+const btnFormConfig = function() {
+  return [
+    {
+      itemType: "input",
+      prop: "name",
+      label:'按钮名称',
+      attrs: {
+          placeholder: "请输入模版名称"
+      }
+    },
+    {
+      itemType: "select",
+      prop: "typeNum",
+      label:'按钮类型',
+      attrs: {
+          list: btnType    
+      }
+    },
+    {
+      itemType: "input",
+      prop: "addSubMax",
+      label:'最大值',
+      attrs: {
+          placeholder: "开关型需输入最大值"
+      }
+    },
+    {
+      itemType: "input",
+      prop: "addSubMin",
+      label:'最小值',
+      attrs: {
+          placeholder: "开关型需输入最小值"
+      }
+    },
+    {
+      itemType: "input",
+      prop: "defValue",
+      label:'默认值',
+      attrs: {
+          placeholder: "请输入默认值"
+      }
+    },
+    {
+      itemType: "input",
+      prop: "bandValue",
+      label:'波段值',
+      attrs: {
+          placeholder: "请输入波段值，默认38000"
+      }
+    },
+    {
+      itemType: "input",
+      prop: "bootCode",
+      label:'引导码',
+      attrs: {
+          placeholder: "请输入引导码"
+      }
+    },
+    {
+      itemType: "input",
+      prop: "bootCodeSend",
+      label:'引导码发送次数',
+      attrs: {
+          placeholder: "请输入引导码发送次数"
+      }
+    },
+    {
+      itemType: "input",
+      prop: "dateCode",
+      label:'数据码',
+      attrs: {
+          placeholder: "请输入数据码",
+          span: 2,
+          type: 'textarea'
+      }
+    },
+    {
+      itemType: "input",
+      prop: "overCode",
+      label:'结束码',
+      attrs: {
+          placeholder: "请输入结束码"
+      }
+    }
+  ]
+}
+
+export {
+  formConfig,
+  btnFormConfig
+}

ruoyi-ui/src/views/template/addTemplate/blocks/detailDialog.vue

@@ -0,0 +1,359 @@
+<template v-if="isShow">
+  <!-- 列表选择弹窗 -->
+  <f-dialog
+    ref="dialog"
+    title="模版配置信息"
+    :initData="handleInitData"
+    :isDetermine="dialogType!=='detail'"
+    :beforeClose="handleBeforeClose"
+    width="1350px"
+  >
+    <template #contain>
+      <div class="box">
+        <div class="box-btns">
+          <h4>组件库</h4>
+          <grid-layout 
+            :layout.sync="cpnArray" 
+            :col-num="6" 
+            :row-height="30" 
+            :min-rows="1" 
+            :is-draggable="false" 
+            :is-resizable="false"
+            :is-mirrored="false" 
+            :vertical-compact="true" 
+            :margin="[10, 10]" 
+            :use-css-transforms="true"
+            class="box-btns-items"
+          >
+            <grid-item 
+              v-for="(item, index) in cpnArray" 
+              :x="item.x" 
+              :y="item.y" 
+              :w="item.w" 
+              :h="item.h" 
+              :i="item.i"
+              :key="index"
+              class="box-btns-item"
+              @click.native="addBtn(item)"
+            >
+              {{ item.text }}
+            </grid-item>
+          </grid-layout>
+        </div>
+        <div class="box-canvs">
+          <div class="box-canvs-main">
+            <grid-layout 
+              :layout.sync="pageArray" 
+              :col-num="6" 
+              :row-height="30" 
+              :is-draggable="true" 
+              :is-resizable="false"
+              :is-mirrored="false" 
+              :vertical-compact="false" 
+              :prevent-collision="true"
+              :margin="[10, 10]" 
+              :use-css-transforms="true"
+            >
+              <grid-item 
+                v-for="(item, index) in pageArray" 
+                :x="item.x" 
+                :y="item.y" 
+                :w="item.w" 
+                :h="item.h" 
+                :i="item.i"
+                :key="index"
+                class="box-btns-item"
+                @dblclick.native="showSeting(item, index)"
+              >
+                <span>{{item.text}} <i @click.stop="removeBtn(index)" class="el-icon-close"></i></span>
+              </grid-item>
+            </grid-layout>
+          </div> 
+        </div>
+        <div class="box-set">
+          <div class="box-set-form">
+            <h3>模版基础配置</h3>
+            <f-form
+              ref="ruleForm"
+              :form="fromData"
+              :disabled="dialogType==='detail'"
+              :config="fromDataConfig"
+              :rules="fromRules"
+              label-position="left"
+              :column="1"
+              :key="fromKey"
+            />
+          </div>
+          <div class="box-set-btn" v-if="btnFromShow">
+            <h3>按钮基础配置</h3>
+            <f-form
+              ref="btnForm"
+              :form="btnData"
+              :config="btnDataConfig"
+              :rules="btnRules"
+              label-position="left"
+              :column="1"
+              :key="btnFromKey"
+            />
+            <div><button @click="changeCpns">确定</button><button @click="btnFromShow = false">取消</button></div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </f-dialog>
+</template>
+<script>
+import { addTemplateApi } from '@/api/template/addTemplate'
+import { formConfig, btnFormConfig } from './config'
+export default {
+  name: "DetailDialog",
+  props: {
+    // 表单数据
+    rowData:{
+      type:Object,
+      default: () => ({})
+    },
+    // 表单类型 add detail edit
+    dialogType:{
+      type:String,
+      default:'add'
+    },
+    allBase: {
+      type: Array,
+      default: () => []
+    },
+    allButton: {
+      type: Array,
+      default: () => []
+    },
+    useStatus: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      // 数据对象
+      fromData:{
+      },
+      fromDataConfig: [],
+      // 表单验证
+      fromRules:{
+        name:[{required: true, message: '请输入模版名称'}],
+        status:[{required: true, message: '请选择状态'}],
+        baseId:[{required: true, message: '请选择基础库'}],
+      },
+      // 表单key
+      fromKey:0,
+      pageArray: [],
+
+      // 按钮配置相关
+      btnFromShow: false,
+      btnData: {},
+      btnDataConfig: btnFormConfig(),
+      btnRules: {
+        name:[{required: true, message: '请输入按钮名称'}],
+        status:[{required: true, message: '请选择按钮类型'}],
+        defValue:[{required: true, message: '请输入默认值'}],
+        bandValue:[{required: true, message: '请输入波段值，默认38000'}],
+        bootCode:[{required: true, message: '请输入引导码'}],
+        bootCodeSend:[{required: true, message: '请输入引导码发送次数'}],
+        dateCode:[{required: true, message: '请输入数据码'}],
+        overCode:[{required: true, message: '请输入结束码'}],
+      },
+      btnFromKey: 0,
+      currentCpn: 0
+    };
+  },
+  methods: {
+    // 显示弹窗
+    show(){
+      this.fromDataConfig = formConfig.call(this)
+      this.$refs.dialog.show();
+    },
+    // 初始化表单数据
+    initFormData(fromData){
+      this.fromData = {
+          content:'',
+          ...fromData
+      }
+      this.fromKey++;
+    },
+    // 初始化按钮表单数据
+    initBtnFormData(fromData){
+      this.btnData = {
+          content:'',
+          ...fromData
+      }
+      if (Object.keys(this.btnData).length == 0) return this.btnFromKey = 0
+      this.btnFromKey++;
+    },
+    // 详情
+    async handleInitData(){
+      const {dialogType,rowData} = this;
+      if(dialogType === 'add') {
+        this.pageArray = []
+        this.initFormData({})
+        return
+      }
+      // 调接口获取详情
+      const res = await addTemplateApi.configDetail({ id: rowData.id });
+      if(res.code != 200) return this.initFormData({})
+      const from = { ...res.data, baseId: res.data.baseId.toString() }
+      this.pageArray = JSON.parse(res.data.components).map((item, index) => ({
+        ...item,
+        x: Number(item.x),
+        y: Number(item.y),
+        w: Number(item.w),
+        h: Number(item.h),
+        i: index,
+        text: item.name
+      }))
+      this.initFormData(from);
+    },
+    // 关闭之前回调.
+    async handleBeforeClose(type){
+      if(type !='ok') {
+        this.btnFromShow = false
+        return true
+      };
+      const validate = await this.$refs.ruleForm.validate();
+
+      if(!validate) return false;
+      const params = {
+          ...this.fromData,
+          components: JSON.stringify(this.pageArray),
+          baseId: Number(this.fromData.baseId)
+      }
+      //  调接口更新数据
+      const res = await addTemplateApi.configAddOrEdit(params);
+      if(res.code !=200){
+          this.$modal.msgError(res.msg);
+          return false;
+      }
+
+      this.$emit('updateList')
+      this.initFormData({})
+      this.btnFromShow = false
+      return true;
+    },
+    addBtn(item) {
+      this.pageArray.push({ ...item, i: this.pageArrayCount })
+    },
+    removeBtn(index){
+      this.pageArray.splice(index, 1)
+    },
+    showSeting(item, index) {
+      console.log(item, 'xxxxxxxxxxx')
+      if (Object.keys(item).length == 0) return 
+      this.currentCpn = index
+      const from = { ...item }
+      this.initBtnFormData(from)
+      this.btnFromShow = true
+    },
+    changeCpns() {
+      this.pageArray.splice(this.currentCpn, 1, { ...this.btnData })
+      this.btnFromShow = false
+    }
+  },
+  computed:{
+    pageArrayCount() {
+      return this.pageArray.length
+    },
+    cpnArray() {
+      return this.allButton.map((item, index) => ({ x: 0, y: index*2, w: 2, h: 2, i: index, text: item.name, ...item }))
+    }
+  },
+
+}
+</script>
+<style scoped lang="scss">
+.box {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  &-btns, &-canvs {
+    width: 375px;
+    height: 770px;
+    border: 1px solid #000;
+  }
+  &-btns {
+    display: flex;
+    flex-direction: column;
+    >h4 {
+      text-align: center;
+    }
+    &-items {
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none;
+      }  
+    }
+    &-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 20px;
+      background-color:#0a0a23;
+      color: #fff;
+      border:none;
+      border-radius: 10px;
+      box-shadow: 0px 0px 2px 2px rgb(0,0,0);
+
+      span {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        i {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          font-size: 16px;
+        }
+      }
+    }
+  }
+  &-canvs {
+    position: relative;
+    background: url(../../../../assets/images/mobile-bg.jpg) no-repeat;
+    background-size: 100%;
+    border: none;
+    margin: 0 20px;
+    &-main {
+      position: absolute;
+      top: 90px;
+      left: 20px;
+      width: 333px;
+      height: 585px;
+      background: #fff;
+      border: 1px solid #000;
+      border-radius: 4px;
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+      display: none;
+    }
+    }
+  }
+  &-set {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    height: 667px;
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    h3 {
+      font-weight: bold;
+    }
+  }
+}
+</style>

ruoyi-ui/src/views/template/addTemplate/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="app-container">
+    <el-form :model="form" ref="form" size="small" :inline="true" label-position="left" label-width="70px">
+      <el-form-item>
+          <el-input v-model="form.label" placeholder="请输入" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleCurrentGetList">查询</el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleOpenDialog('add', {})">新增</el-button>
+      </el-form-item>
+    </el-form>
+    <tableList
+      ref="table"
+      :column="tableConfig"
+      showOperation
+      operationWidth="100px"
+      :checkbox="false"
+      :getList="handleGetList"
+    >
+      <!-- 列表操作页 -->
+      <template #default="scope">
+        <!-- 已生效只能看详情 -->
+        <f-btn type="text" @click="handleOpenDialog('edit',scope.row)">编辑</f-btn>
+        <f-btn type="delete" @click="handleDelete('del', scope.row)">删除</f-btn>
+      </template>
+    </tableList>
+    <!-- 详情弹窗 -->
+    <detail-dialog 
+      ref="detailDialog" 
+      :rowData="rowData" 
+      :dialogType="dialogType" 
+      :allBase="allBase"
+      :allButton="allButton"
+      :useStatus="useStatus"
+      @updateList="handleCurrentGetList"
+    />
+  </div>
+</template>
+<script>
+import DetailDialog from './blocks/detailDialog.vue';
+import tableList from "@/comComponents/tableList";
+import { addTemplateApi } from '@/api/template/addTemplate'
+import { addBaseApi } from '@/api/base/addBase'
+import { addButtonApi } from '@/api/template/addButton'
+
+// 下拉框选项
+const useStatus = [
+  { name: '使用中', value: '0' },
+  { name: '未使用', value: '1' },
+  { name: '暂停', value: '2' },
+];
+
+export default {
+  components: { DetailDialog, tableList },
+  data() {
+    return {
+      form: {
+        label: ''
+      },
+      // 弹窗数据对象
+      rowData:{},
+      // 弹窗类型
+      dialogType:'add',
+      // 弹窗更新key
+      dialogKey:0,
+      allBase: [],
+      allButton: [],
+      tableConfig: [],
+      useStatus
+    }
+  },
+  methods: {
+    selectDictLabel(listObj, key) {
+      return listObj.find(item => item.value == key).name
+    },
+    // 查询列表
+    handleCurrentGetList(){
+      this.$refs.table.handleQueryList();
+    },
+    // 获取列表
+    async handleGetList(page) {
+      const res = await addTemplateApi.getList(
+        {
+          ...page,
+          name: this.form.label
+        }
+      );
+      if(res.code!= 200 ) return {
+        current:1,
+        records:[],
+        total:0
+      }
+      return res.data;
+    },
+    // 打开详情、编辑\新增弹窗事件
+    handleOpenDialog(type, rowData) {
+      this.dialogType = type;
+      this.rowData = {...rowData};
+      this.$nextTick(()=>{
+        this.$refs.detailDialog.show();
+      })
+    },
+    // 编辑状态
+    handleDelete(type, row){
+      this.$modal.confirm('是否确认删除此配置').then(async ()=> {
+        const res = await addTemplateApi.configDelete({ id: row.id });
+        if(res.code != 200){
+          this.$modal.msgErrpr(res.msg || "操作失败");
+          return false;
+        }
+        this.handleCurrentGetList();
+        this.$modal.msgSuccess("操作成功");
+      })
+    }
+  },
+  async created() {
+    const res = await addBaseApi.getAllList();
+    if(res.code!= 200 ) return { current:1, records:[], total:0 }
+    this.allBase = res.data.map(item => ({ name: item.name, value: item.id.toString() }))
+    this.tableConfig = [
+      { 'name': "模版名称" },
+      { "status": "状态", formatter: row => this.selectDictLabel(useStatus, row.status)},
+      { "baseId": "基础库", formatter: row => this.selectDictLabel(this.allBase, row.baseId)},
+      { "createTime": "创建时间", formatter:row => this.dayjs(row.createTime).format("YYYY-MM-DD HH:mm")}
+    ]
+    const btns = await addButtonApi.getAllList()
+    if(btns.code!= 200 ) return { current:1, records:[], total:0 }
+    this.allButton = btns.data
+  },
+  mounted() {
+    this.handleCurrentGetList()
+  },
+}
+</script>
+<style lang="scss" scoped>
+</style>

ruoyi-ui/vue.config.js

@@ -7,9 +7,9 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || '遥控器后台管理系统' // 网页标题
 
-const port = process.env.port || process.env.npm_config_port || 80 // 端口
+const port = process.env.port || process.env.npm_config_port || 88 // 端口
 
 // vue.config.js 配置说明
 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions