提交

ruoyi-ui/src/components/FormItemComponent/index.vue

@@ -28,7 +28,7 @@
 </template>
 <script>
 import Vue from "vue";
-import layoutAlgorithm from "@/api/layoutAlgorithm";
+import layoutAlgorithm from "../../utils/layoutAlgorithm.js";
 export default {
   name: "FormItemComponent",
   props: {
@@ -146,3 +146,4 @@ export default {
   grid-auto-rows: minmax(auto);
 }
 </style>
+

ruoyi-ui/src/components/HistoricalProcess/index.vue

@@ -8,7 +8,7 @@
       :buttonType="false"
       @formChange="formChange"
     ></FormItemComponent>
-    <StandardTable
+    <StandardTabletwo
       class="table"
       :currentPage="searchData.page"
       :pageSize="searchData.pageSize"
@@ -16,7 +16,7 @@
       :columns="columns"
       :data="data"
       :standardTableEvent="standardTableEvent"
-    ></StandardTable>
+    ></StandardTabletwo>
 
     <!-- 详情弹框 -->
     <Modal
@@ -35,7 +35,7 @@
 <script>
 import FormItemComponent from "../FormItemComponent";
 import ItemComponent from "../ItemComponent";
-import StandardTable from "../StandardTable";
+import StandardTabletwo from "../StandardTabletwo";
 import FlowChartShow from "../FlowChartShow";
 // import { mapMutations } from "vuex";
 import {
@@ -45,7 +45,7 @@ import {
   } from "@/api/activiti/definition";
 export default {
   name: "HistoricalProcess",
-  components: { FormItemComponent, StandardTable, FlowChartShow },
+  components: { FormItemComponent, StandardTabletwo, FlowChartShow },
   props: {
     tabalive: { type: String, default: "" }
   },
@@ -273,10 +273,10 @@ export default {
     //业务关系下拉数据
     getselectOption() {
       addGenhistoricap().then(res => {
-        if (res.data.resultCode === 0) {
+        if (res.resultCode === 0) {
           this.formLists.forEach(outer => {
             if (outer.item.filed === "businessType") {
-              outer.item.options = res.data.data.relations.map(item => {
+              outer.item.options = res.data.relations.map(item => {
                 item.value = item.businesskey;
                 item.label = item.businessName;
                 return item;
@@ -317,8 +317,8 @@ export default {
       let obj = Object.assign({}, this.searchData);
       delete obj.updateTime;
       addGenhistorihistory(obj).then(res => {
-        if (res.data.resultCode === 0) {
-          let data = res.data.data;
+        if (res.resultCode === 0) {
+          let data = res.data;
           this.total = data.total;
           this.data = data.records;
         }

ruoyi-ui/src/components/ItemComponent/index.vue

@@ -170,7 +170,7 @@
   </div>
 </template>
 <script>
-// import dataProp from "../config/props.config";
+import dataProp from "../../props/index.js";
 export default {
   name: "ItemComponent",
   props: {

ruoyi-ui/src/components/MutipleSelectPop/index.vue

@@ -2,7 +2,7 @@
   <div class="MutipleSelectPop">
     <div class="dialog_left">
       <div class="left_top">
-        <Input
+       <Input
           @on-change="inputchange"
           @on-keydown="inputkeydown"
           search

ruoyi-ui/src/components/mutipleSelectPop/index.vue

@@ -2,7 +2,7 @@
   <div class="MutipleSelectPop">
     <div class="dialog_left">
       <div class="left_top">
-        <Input
+       <Input
           @on-change="inputchange"
           @on-keydown="inputkeydown"
           search

ruoyi-ui/src/components/todoProcess/index.vue

@@ -367,6 +367,7 @@ export default {
         this.searchData.endTime = new Date(
           this.searchData.createTime[1]
         ).format("yyyy-MM-dd hh:mm");
+        console.log(this.searchData)
       } else {
         this.searchData.startTime = "";
         this.searchData.endTime = "";

ruoyi-ui/src/props/index.js

@@ -0,0 +1,321 @@
+// 输入框
+const input = {
+  // item 类型
+  type: 'input', // 必填!
+  // label名称
+  title: '', // 必填!
+  // 字段名称
+  field: '', // 必填!
+  // input值
+  value: '',
+  props: {
+    // 输入框类型，可选值为 text、password、textarea、url、email、date
+    type: 'text', // 必填!
+    // 是否显示清空按钮
+    clearable: false,
+    // 设置输入框为禁用状态
+    disabled: false,
+    // 设置输入框为只读
+    readonly: false,
+    // 文本域默认行数，仅在 textarea 类型下有效
+    rows: 4,
+    // 自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }
+    autosize: false,
+    // 将用户的输入转换为 Number 类型。在有正则的时候：1）该输入框为空的时候，值为空字符串。2）input方法不可用。
+    number: false,
+    // 自动获取焦点
+    autofocus: false,
+    // 原生的自动完成功能，可选值为 off 和 on
+    autocomplete: 'off',
+    // 占位文本
+    placeholder: '请输入',
+    // 输入框尺寸，可选值为large、small、default或者不设置
+    size: 'default',
+    // 最大输入长度
+    maxlength: null,
+    // 输入框尾部图标，仅在 text 类型下有效
+    icon: null,
+    // 输入框头部图标
+    prefix: null,
+    // 输入框尾部图标
+    suffix: null,
+    // 给表单元素设置 id，详见 Form 用法。
+    'element-id': null,
+    // 原生的 spellcheck 属性
+    spellcheck: false,
+    // 原生的 wrap 属性，可选值为 hard 和 soft，仅在 textarea 下生效
+    wrap: 'soft',
+    // 正则表达式
+    regx: null
+  },
+  event: {
+    // 按下回车键时触发
+    enter: (event, $this) => {},
+    // 设置 icon 属性后，点击图标时触发
+    click: (event, $this) => {},
+    // 数据改变时触发
+    change: (event, $this) => {},
+    // 输入框聚焦时触发
+    focus: (event, $this) => {},
+    // 输入框失去焦点时触发
+    blur: (event, $this) => {},
+    // 原生的 keyup 事件
+    keyup: (event, $this) => {},
+    // 原生的 keydown 事件
+    keydown: (event, $this) => {},
+    // 原生的 keypress 事件
+    keypress: (event, $this) => {},
+    // 开启 search 时可用，点击搜索或按下回车键时触发
+    search: (event, $this) => {},
+    // 添加正则后，校验出错的时候触发
+    regxCheck: (value, $this, errorValue) => {}
+  },
+};
+// 下拉框
+const select = {
+  type: 'select', // 必填!
+  // label名称
+  title: '', // 必填!
+  // 字段名称
+  field: '', // 必填!
+  // input值
+  value: '',
+  // 可选参数
+  options: [
+    // { value: '104', label: '生态蔬菜', disabled: false },
+    // { value: '105', label: '新鲜水果', disabled: false },
+  ],
+  props: {
+    // 是否支持多选
+    multiple: false,
+    // 多选情况下的样式控制,只在multiple为true有效
+    multipleType: false,
+    // 是否禁用
+    disabled: false,
+    // 是否可以清空选项，只在单选时有效
+    clearable: true,
+    // 选择框大小，可选值为large、small、default或者不填
+    size: 'default',
+    // 选择框默认文字
+    placeholder: '请选择',
+    // 当下拉列表为空时显示的内容
+    'not-found-text': '无匹配数据',
+    // 在返回选项时，是否将 label 和 value 一并返回，默认只返回 value
+    'label-in-value': false,
+    // 弹窗的展开方向，可选值为 bottom 和 top
+    placement: 'bottom',
+    // 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
+    transfer: true,
+  }
+};
+// Switch
+const Switch = {
+  type: 'Switch', // 必填!
+  // label名称
+  title: '', // 必填!
+  // 字段名称
+  field: '', // 必填!
+  // input值
+  value: false,
+  props: {
+    
+  }
+};
+// 单选框
+const radiobox = {
+  type: 'radiobox', // 必填!
+  // label名称
+  title: '', // 必填!
+  // 字段名称
+  field: '', // 必填!
+  // input值
+  value: false,
+  // 可选参数
+  props: {
+    // 多选框组的尺寸，可选值为 large、small、default 或者不设置
+    size: 'default',
+    // 是否禁用当前项
+    disabled: false
+  }
+};
+// 复选框
+const checkbox = {
+  type: 'checkbox', // 必填!
+  // label名称
+  title: '', // 必填!
+  // 字段名称
+  field: '', // 必填!
+  // input值
+  value: false,
+  // 可选参数
+  props: {
+    // 多选框组的尺寸，可选值为 large、small、default 或者不设置
+    size: 'default',
+    // 是否禁用当前项
+    disabled: false,
+    // 支持checkout样式为radio样式
+    circle: false
+  },
+  event: {
+    change: (event, $this) => {},
+  }
+};
+// 日期选择
+const DatePicker = {
+  type: 'DatePicker', // 必填!
+  field: '', // 必填!
+  title: '活动日期', // 必填!
+  // input值, type为daterange,datetimerange value为数组 [start_value,end_value]
+  value: '',
+  props: {
+    // 显示类型，可选值为 date、daterange、datetime、datetimerange、year、month
+    type: 'datetimerange', // 必填!
+    // 展示的日期格式
+    format: 'yyyy-MM-dd HH:mm',
+    // 日期选择器出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
+    placement: 'bottom-start',
+    // 占位文本
+    placeholder: '请选择获得时间',
+    // 选择器额外配置，比如不可选日期与快捷选项
+    options: {
+      disabledDate (date) {
+          return date && date.valueOf() > Date.now();
+      }
+    },
+    // 手动控制日期选择器的显示状态，true 为显示，false 为收起。使用该属性后，选择器不会主动关闭。建议配合 slot 及 confirm 和相关事件一起使用
+    open: null,
+    // 是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭
+    confirm: false,
+    // 尺寸，可选值为large、small、default或者不设置
+    size: 'default',
+    // 是否禁用选择器
+    disabled: false,
+    // 是否显示清除按钮
+    clearable: true,
+    // 完全只读，开启后不会弹出选择器
+    readonly: false,
+    // 文本框是否可以输入
+    editable: false,
+    // 是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
+    transfer: true
+  }
+};
+
+// 下拉框
+const DropDownSelectFilter = {
+  type: 'DropDownSelectFilter', // 必填!
+  field: '', // 必填!
+  title: '', // 必填!
+  value: '',
+  props: {
+    placeholder:'请选择',
+    // 是否是单选，可选值为 true、false
+    single: true,
+    // 下拉气泡表格里数据
+    data: {},
+    // 数据总条数
+    totalRowCount: 0,
+    // 每页条数
+    pageSize: 10,
+    // 模糊搜索的数据
+    AutoData: [],
+    // 模糊搜索要显示的列
+    columns: [],
+    // 无数据的时候提示
+    dataEmptyMessage: '暂无数据',
+    // 下拉多选 默认选中数据
+    defaultSelected: [],
+    // 是否将弹层放置于 body 内
+    transfer: true,
+    columnsKey:[]
+  }
+};
+//下拉和输入框混合
+
+const selectInput = {
+  // item 类型
+  type: 'selectInput', // 必填!
+  // label名称
+  title: '', // 必填!
+  // 字段名称
+  field: '', // 必填!
+  // input值
+  value: '',
+  slotfiled:'',//卡槽对应的键
+  slotValue:'', 
+  props: {
+    // 输入框类型，可选值为 text、password、textarea、url、email、date
+    type: 'text', // 必填!
+    // 是否显示清空按钮
+    clearable: false,
+    // 设置输入框为禁用状态
+    disabled: false,
+    // 设置输入框为只读
+    readonly: false,
+    // 文本域默认行数，仅在 textarea 类型下有效
+    rows: 4,
+    // 自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }
+    autosize: false,
+    // 将用户的输入转换为 Number 类型。在有正则的时候：1）该输入框为空的时候，值为空字符串。2）input方法不可用。
+    number: false,
+    // 自动获取焦点
+    autofocus: false,
+    // 原生的自动完成功能，可选值为 off 和 on
+    autocomplete: 'off',
+    // 占位文本
+    placeholder: '请输入',
+    // 输入框尺寸，可选值为large、small、default或者不设置
+    size: 'default',
+    // 最大输入长度
+    maxlength: null,
+    // 输入框尾部图标，仅在 text 类型下有效
+    icon: null,
+    // 输入框头部图标
+    prefix: null,
+    // 输入框尾部图标
+    suffix: null,
+    // 给表单元素设置 id，详见 Form 用法。
+    'element-id': null,
+    // 原生的 spellcheck 属性
+    spellcheck: false,
+    // 原生的 wrap 属性，可选值为 hard 和 soft，仅在 textarea 下生效
+    wrap: 'soft',
+    // 正则表达式
+    regx: null
+  },
+  event: {
+    // 按下回车键时触发
+    enter: (event, $this) => {},
+    // 设置 icon 属性后，点击图标时触发
+    click: (event, $this) => {},
+    // 数据改变时触发
+    change: (event, $this) => {},
+    // 输入框聚焦时触发
+    focus: (event, $this) => {},
+    // 输入框失去焦点时触发
+    blur: (event, $this) => {},
+    // 原生的 keyup 事件
+    keyup: (event, $this) => {},
+    // 原生的 keydown 事件
+    keydown: (event, $this) => {},
+    // 原生的 keypress 事件
+    keypress: (event, $this) => {},
+    // 开启 search 时可用，点击搜索或按下回车键时触发
+    search: (event, $this) => {},
+    // 添加正则后，校验出错的时候触发
+    regxCheck: (value, $this, errorValue) => {}
+  },
+};
+
+
+const dataProp = {
+  DatePicker,
+  checkbox,
+  radiobox,
+  Switch,
+  select,
+  input,
+  selectInput,
+  DropDownSelectFilter
+};
+export default dataProp;

ruoyi-ui/src/utils/layoutAlgorithm.js

@@ -0,0 +1,123 @@
+
+// 查找数组中最后一个不为空的值，获取可使用空位,为了找出这一行是否能够存放当前元素。
+// 返回值为该行可放的空格数
+function getLastNotNull(array) {
+  let canUseLength = array.length;
+  // 数组取反,获取到第一个不为空的值，则判断出该行可放的空格数量
+  array.reverse().every((item, index) => {
+    if (item) {
+      canUseLength = index;
+      return false;
+    }
+    return true;
+  });
+  return canUseLength;
+}
+
+
+// 判断从当前空格开始填，是否所有空格都能够放入
+// currentRow:当前开始填充行
+// currentCol:当前开始填充列
+// pointer:当前元素的数据，宽高
+// ListsMap:当前整个填充块的
+// defaultColumn:默认一列的行数
+function checkAllSpace(currentRow, currentCol, pointer, ListsMap, defaultColumn) {
+  const rowArray = Array(pointer.row).fill(null);
+  const colArray = Array(pointer.col).fill(null);
+  
+  let flag = true;
+  rowArray.map((item, row) => {
+    colArray.map((temp, col) => {
+      if (ListsMap[row + currentRow][col + currentCol]) {
+        flag = false;
+      }
+    });
+  });
+  if ((currentCol + pointer.col) > defaultColumn) {
+    flag = false;
+  }
+  return flag;
+}
+
+
+// defaultColumn:默认每行的列数
+// lists:[{  //每一个item的行和宽
+//   row:,
+//   col:
+// }]
+// type:fill  填充  newline  换行
+// 返回值是在lists的item中添加x,y属性:
+// {
+//   y:i+1,  //列
+//   x:j+1,  //行
+//   row:pointer.row, //行高
+//   col:pointer.col  //宽高
+// }
+function layoutAlgorithm(defaultColumn, lists, type = 'fill') {
+  // 定义每一行的空数据defaultRow
+  const defaultRow = Array(defaultColumn).fill(null);
+  // 定义最大行数
+  const num = lists.reduce((sum, current) => { sum += (!current.row || current.row < 1) ? 1 : current.row; return sum; }, 0);
+  const sumArray = Array(num).fill(null);
+
+  // 定义map模型 默认 50*defaultColumn的布局
+  const ListsMap = sumArray.concat([]).reduce((currentValue) => {
+    currentValue.push(defaultRow.concat([]));
+    return currentValue;
+  }, []);
+
+
+  const coordinateMap = {};
+  // 遍历配置文件的行列数，获取对应的grid布局坐标
+  lists.every((pointer, pointerIndex) => {
+    // 对初始化数据进行判断处理
+    // 当列数大于默认分列时，将当前元素列改为默认的分列数
+    // 当当前项没有设置宽高，默认设为1
+    if (pointer.show === false) { // 当属性show为false时，则默认返回位置(-1,-1)即不显示该节点
+      if (!coordinateMap[pointerIndex]) { // 记录起始的行列以及宽高，作为function返回值
+        pointer.x = -1;
+        pointer.y = -1;
+        coordinateMap[pointerIndex] = pointer;
+      }
+      return true;
+    }
+    pointer.col = (!pointer.col || pointer.col < 1) ? 1 : pointer.col;
+    pointer.col = pointer.col > defaultColumn ? defaultColumn : pointer.col;
+    pointer.row = (!pointer.row || pointer.row < 1) ? 1 : pointer.row;
+    ListsMap.every((item, i) => item.every((temp, j) => {
+      // 当类型为换行时,判断该行是否可放入,不可放入时则换行
+      if (type === 'newline') {
+        if (getLastNotNull([].concat(item)) < pointer.col) {
+          return true;
+        }
+      }
+      // 当类型为填充时,才执行checkAllSpace，对对应的所有空格进行可填充判断
+      if (!temp && (type === 'fill' ? checkAllSpace(i, j, pointer, ListsMap, defaultColumn) : true)) { // 为空时可放
+        if (!coordinateMap[pointerIndex]) { // 记录起始的行列以及宽高，作为function返回值
+          pointer.x = j + 1;
+          pointer.y = i + 1;
+          coordinateMap[pointerIndex] = pointer;
+        }
+        // 将对应的点打上标记
+        const rowArray = Array(pointer.row).fill(null);
+        const colArray = Array(pointer.col).fill(null);
+        rowArray.map((item, row) => {
+          colArray.map((temp, col) => {
+            ListsMap[i + row][j + col] = `k${pointerIndex}`;
+            return true;
+          });
+          return true;
+        });
+
+        return false;
+      }
+      return true;
+    }));
+    return true;
+  });
+
+  return coordinateMap;
+} 
+
+
+export default layoutAlgorithm;

ruoyi-ui/src/views/system/surface/index.vue

@@ -19,13 +19,13 @@
     <!-- 内容 -->
     <div class="table_nav">
       <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column type="selection" width="55" style="color: red;" align="center" />
         <template v-for="(item, index) in tabData">
-          <el-table-column :label="item.columnComment" align="center" :prop="item.columnName" :key="index">
+          <el-table-column :label="item.columnComment"  align="center" :prop="item.columnName" :key="index" >
             <template slot-scope="scope">
               <img class="img_icon" v-if="item.htmlType=='imageUpload' && scope.row[scope.column.property]" @click="imgBtn(JSON.parse(scope.row[scope.column.property])[0].url)"
                 :src="JSON.parse(scope.row[scope.column.property])[0].url" alt="">
-              <span v-else>{{ scope.row[scope.column.property] }}</span>
+              <span  v-else>{{ scope.row[scope.column.property] }}</span>
             </template>
           </el-table-column>
         </template>
@@ -54,7 +54,8 @@
     name: "index",
     data() {
       return {
-        pir_imgs: '', // 图片链接
+        pir_imgs: '', // 图片链接
+        // jue:'color: red;',
         tabData: [],
         multiple: true,
         single: true,
@@ -336,7 +337,8 @@
     // }
 
     .el-collapse {
-      border-top: 0;
+      border-top: 0;
+
     }
   }
 </style>

ruoyi-ui/src/views/system/table/index.vue

@@ -9,7 +9,7 @@
       </div>
     </div>
     <!-- 内容 -->
-    <div class="table_nav headertable_nav">
+    <div class="table_nav headertable_nav" >
       <el-collapse v-model="activeNames" @change="handleChange">
         <el-form :model="queryParams" :rules="queryData.rules" ref="queryForm" :inline="true" label-width="120px">
           <el-collapse-item :title="item.columnComment" :name="index" v-for="(item,index) in queryData.showData" :key="index">
@@ -286,7 +286,7 @@
          if(this.queryData.showData.length !==0){
           this.queryData.showData.filter(route => {
               if(route.hrChildren.length !== 0){
-                 if(route.hrChildren[1].readonly == true){
+                 if(route.hrChildren[0].readonly == true){
                        this.imgShoew = true
                  }else{
                    this.imgShoew = false