olp-table 5.3.1 → 5.3.4

package/src/components/ol-dialog-excel.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-Dialog v-model="show" :title="title" :width="600" show-footer>
+    <template #default>
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="选择数据" prop="selectData" :span="24">
+          <olDictTag code="select_data" type="radio" border="true" v-model="form.selectData"/>
+        </el-form-item>
+        <el-form-item label="选择字段" prop="selectField" :span="24">
+          <vxe-grid style="width: 100%" ref='xGrid' v-bind="gridOptions"/>
+        </el-form-item>
+      </el-form>
+    </template>
+    <template #footer>
+      <vxe-button @click="cancelEvent">取消</vxe-button>
+      <vxe-button status="primary" @click="confirmEvent">立即导出</vxe-button>
+    </template>
+  </el-Dialog>
+</template>
+<script>
+import {get} from "@/utils/http/httpUtils";
+import {getDateTime} from "@/utils/DateUtils";
+
+export default {
+  name: 'olDialogExcel',
+  inject: ['http'],
+  props: {
+    title: {
+      default: '导出数据'
+    },
+    name: {
+      default: undefined
+    },
+    selectData: {
+      default: '1'
+    }
+  },
+  data() {
+    return {
+      gridOptions: {
+        border: true,
+        keepSource: true,
+        showOverflow: true,
+        loading: false,
+        height: 330,
+        align: 'left',
+        scrollX: {enabled: true, gt: 15},
+        scrollY: {enabled: true, gt: 0},
+        columnConfig: {
+          resizable: true
+        },
+        rowConfig: {
+          useKey: true,
+          keyField: 'id',
+        },
+        expandConfig: {
+          labelField: 'seq'
+        },
+        editConfig: {
+          trigger: 'click',
+          mode: 'row',
+          showStatus: true,
+        },
+        checkboxConfig: {
+          labelField: 'title',
+          reserve: true,
+          highlight: true,
+          range: true,
+          checkAll: true
+        },
+        columns: [
+          {
+            type: 'checkbox',
+            title: '全部字段',
+            // width: 330
+          },
+        ],
+        toolbarConfig: {},
+        data: [],
+        url: '/online/tableConfigColumn/queryByParentId',
+      },
+      show: false,
+      form: {selectData: ''}
+    }
+  },
+  methods: {
+    init(id) {
+      this.gridOptions.loading = true
+      get(this.http, this.gridOptions.url, {id: id}, true).then(res => {
+        this.gridOptions.data = res
+        this.gridOptions.loading = false
+      })
+    },
+    cancelEvent() {
+      this.show = false
+    },
+    confirmEvent() {
+      let columns = this.$refs.xGrid.getCheckboxRecords(true);
+      let exportParam = {
+        selectData: this.form.selectData,
+        columns: columns,
+        name: this.name || getDateTime(98)
+      }
+      this.$emit('emits', {m: 'exportData', v: {exportParam: exportParam, cancelEvent: this.cancelEvent}})
+    }, open({id, selectData}) {
+      this.form.selectData = selectData
+      this.show= true
+      this.init(id)
+
+    }
+  },
+}
+</script>

package/src/components/ol-dialog-import.vue

@@ -0,0 +1,304 @@
+<template>
+  <el-Dialog v-model="show" :title="title" :width="width" :center="center" :draggable="draggable" show-footer>
+    <template #default>
+      <el-form :model="formData" ref="formRef" label-width="80px" class="el-form-globals">
+        <el-row>
+          <el-col :xs="24" :sm="4" :md="4" :lg="4">
+            <div class="static-content-item">
+              <el-upload
+                  ref="uploadRef"
+                  :action="formData.action"
+                  :headers="formData.headers"
+                  :show-file-list="false"
+                  :on-success="onChange"
+              >
+                <el-button>上传预览
+                  <el-icon class="el-icon--right">
+                    <Upload/>
+                  </el-icon>
+                </el-button>
+              </el-upload>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="4" :md="4" :lg="4">
+            <div class="static-content-item">
+              <el-button @click="submit">立即上传
+                <el-icon class="el-icon--right">
+                  <Upload/>
+                </el-icon>
+              </el-button>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="4" :md="4" :lg="4">
+            <div class="static-content-item">
+              <el-button @click="download">下载模板
+                <el-icon class="el-icon--right">
+                  <Download/>
+                </el-icon>
+              </el-button>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="4" :md="4" :lg="4">
+            <div class="static-content-item">
+              <el-button :disabled="formData.disabled" :class="formData.selected_but"
+                         @click="batchRemove">批量删除
+                <el-icon class="el-icon--right">
+                  <Delete/>
+                </el-icon>
+              </el-button>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="8" :md="8" :lg="8">
+            <el-form-item label="校验唯一" prop="uniCode">
+              <el-select v-model="formData.uniCode" @change="handleChange" class="full-width-input" clearable>
+                <el-option v-for="(item, index) in gridOptions.columns.filter(o=>o.field)" :key="index"
+                           :label="item.title"
+                           :value="item.title" :disabled="item.disabled"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <vxe-grid style="width: 100%" ref='xGrid' v-bind="gridOptions" @checkboxChange="selectRowChange"
+                    @checkboxAll="selectRowChange"/>
+        </el-row>
+      </el-form>
+    </template>
+    <template #footer>
+      <vxe-button @click="close">关闭</vxe-button>
+    </template>
+  </el-Dialog>
+</template>
+
+<script>
+import {useMessage} from "@/utils/message";
+import {get, request} from "@/utils/http/httpUtils";
+import {exportExcel} from "@/utils/ExcelUtil";
+import {storeDict} from "@/store/dict";
+
+const dict = storeDict();
+const message = useMessage() // 消息弹窗
+export default {
+  name: 'olDialogImport',
+  inject: ['http'],
+  props: {
+    title: {
+      default: '导入数据'
+    },
+    name: {
+      default: '导入数据'
+    },
+    width: {
+      default: 800
+    },
+    draggable: {
+      default: true
+    },
+    center: {
+      default: false
+    },
+    selectData: {
+      default: '1'
+    }
+  },
+  data() {
+    return {
+      form: {selectData: ''},
+      tableConfigId: '',
+      show: '',
+      formData: {},
+      gridOptions: {
+        border: true,
+        keepSource: true,
+        showOverflow: true,
+        loading: false,
+        height: 330,
+        align: 'left',
+        scrollX: {enabled: true, gt: 15},
+        scrollY: {enabled: true, gt: 0},
+        columnConfig: {
+          resizable: true
+        },
+        rowConfig: {
+          useKey: true,
+          keyField: 'id',
+        },
+        expandConfig: {
+          labelField: 'seq'
+        },
+        editConfig: {
+          trigger: 'click',
+          mode: 'row',
+          showStatus: true,
+        },
+        checkboxConfig: {
+          labelField: 'title',
+          reserve: true,
+          highlight: true,
+          range: true,
+          checkAll: false
+        },
+        columns: [],
+        data: [],
+        toolbarConfig: {},
+        initColumns: [
+          {type: 'checkbox', width: 50, fixed: 'left'},
+          {type: 'seq', title: '序号', width: 50, fixed: 'left'}
+        ],
+        url: '/online/tableConfigColumn/queryByParentId',
+      }
+    }
+  },
+  methods: {
+    submit() {
+      if (!this.gridOptions.data || this.gridOptions.data.length == 0) return message.error('导入数据为空！')
+      let params = this.getParams();
+      this.gridOptions.loading = true
+      request(this.http, {
+        url: '/online/crud/batchSave',
+        method: 'post',
+        data: params,
+        timeout: 1000 * 90 * 90
+      }, false, false).then(({msg}) => {
+        message.success(msg)
+      }).finally(() => {
+        this.gridOptions.loading = false;
+        this.show = false
+        this.$emit('emits', {m: 'query'})
+      })
+    },
+    open({id}) {
+      this.show = true
+      this.tableConfigId = id
+      this.gridOptions.data = []
+      this.init(id)
+    },
+    handleChange(title) {
+      let que = [];
+      for (let j = 0; j < this.gridOptions.data.length; j++) {
+        let data = this.gridOptions.data[j];
+        if (j == 0) {
+          que.push(data[title])
+          break
+        }
+        let index = que.index0f(data[title]);
+        if (index != -1) {
+          return message.warn('第' + (j + 1) + '行-第' + (index + 1) + '行数据不唯-:' + data[title])
+
+        }
+        que.push(data[title])
+      }
+      message.success(title + '无重复数据!');
+    },
+    selectRowChange() {
+      this.formData.disabled = this.$refs.xGrid.getCheckboxRecords(true).length == 0
+      this.formData.selected_but = this.formData.disabled ? 'unselected_but' : 'selected_but'
+    },
+    batchRemove() {
+      let records = this.$refs.xGrid.getCheckboxRecords(true);
+      if (!records || records.length == 0) return message.error('未选中数据！')
+      this.$refs.xGrid.removeCheckboxRow()
+    },
+    getParams() {
+      return {
+        tableConfigId: this.tableConfigId,
+        columnAndValueListMap: this.getDataByDict(this.gridOptions.data)
+      }
+    }, onChange({data}) {
+      data = this.getDataByTitle(data)
+      this.gridOptions.data = data
+    },
+    getDataByTitle(data) {
+      if (data && data.length >= 1) {
+        let rows = []
+        data.map(row => {
+          let obj = {}
+          for (let key in row) {
+            this.gridOptions.columns.forEach((item) => {
+              if (item.title == key) {
+                obj[item.field] = row[key]
+              }
+            })
+          }
+          rows.push(obj)
+        })
+        return rows
+      }
+    },
+    getDataByDict(data) {
+      if (data && data.length >= 1) {
+        let rows = []
+        data.map(row => {
+          let obj = {}
+          for (let key in row) {
+            this.gridOptions.columns.forEach((item) => {
+              if (item.field == key) {
+                obj[item.field] = this.getRowValue(item.dictCode, row[key])
+              }
+            })
+          }
+          rows.push(obj)
+        })
+        return rows
+      }
+    },
+    download() {
+      exportExcel({
+        data: [],
+        name: '模板下载',
+        columns: this.gridOptions.columns,
+        option: {align: 'center'}
+      })
+    },
+    init(id) {
+      this.gridOptions.loading = true
+      get(this.http, this.gridOptions.url, {id: id}, true).then(res => {
+        for (const data of res) {
+          data.width = 100
+        }
+        res.push(...this.gridOptions.initColumns)
+        this.gridOptions.columns = res
+        this.gridOptions.loading = false
+      })
+    },
+    getRowValue(dictCode, val) {
+      if (dictCode) {
+        return this.getDictValueByCode(dictCode, val);
+      }
+      return val
+    },
+    getDictValueByCode(dictCode, val) {
+      for (const option of dict.val(dictCode)) {
+        if (option.label == val) {
+          return option
+        }
+      }
+      return val
+    },
+    close() {
+      this.show = false
+    }
+  }, created() {
+    this.formData = {
+      action: this.http.axios().defaults.baseURL + '/online/crud/upload',
+      uniCode: '',
+      headers: this.http.axios().defaults.headers,
+      disabled: true,
+      selected_but: 'unselected_but'
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.el-form-item__content {
+  display: flow;
+}
+
+.selected_but {
+  background-color: #f56c6c;
+}
+
+.unselected_but {
+  background-color: #fbcccc;
+}
+</style>

package/src/components/ol-dialog-json.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <el-dialog
+        v-bind="$attrs"
+        width="500px"
+        v-model="show"
+        :close-on-click-modal="false"
+        :modal-append-to-body="false"
+        @open="onOpen"
+        @close="onClose"
+    >
+      <JsonViewer :style="{
+                    minHeight: mainRowHeight,
+                    maxHeight: mainRowHeight,
+                    overflow: 'auto',
+                    fontSize: `${fontSize}px`,
+                    fontWeight: fontWeight,
+                  }"
+                  :boxed="false"
+                  :sort="false"
+                  :expanded="true"
+                  :copyable="true"
+                  :show-array-index="false"
+                  :show-double-quotes="true"
+                  expand-depth="20"
+                  :value="values"/>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// 引入组件
+import JsonViewer from "vue-json-viewer";
+import "vue-json-viewer/style.css";//引入插件样式
+
+export default {
+  name: 'olDialogJson',
+  components: {
+    JsonViewer,
+  },
+  props: {
+    modelValue: {
+      required: false
+    },
+    item: {
+      required: false
+    }
+  },
+  data() {
+    return {
+      show: true,
+      fontSize: '',
+      fontWeight: '',
+      mainRowHeight: '',
+    };
+  },
+  computed: {
+    values: {
+      get() {
+        return this.modelValue ? this.getJson(this.modelValue) : '';
+      },
+      set(value) {
+        this.$emit('update:modelValue', value);
+      }
+    }
+  },
+  methods: {
+    onOpen() {
+
+    },
+    onClose() {
+
+    },
+    getJson(val) {
+      if (typeof val === 'string') {
+        return JSON.parse(val);
+      }
+      return val;
+    }
+  }
+};
+</script>

package/src/components/ol-dialog-table.vue

@@ -0,0 +1,81 @@
+<template>
+  <el-dialog v-model="show"  :title="title" :width="width" :fullscreen="fullscreen" top="5vh" show-footer  append-to-body>
+    <div style="height: 75vh; overflow-y: auto;">
+      <!--表单开始-->
+<!--      <el-scrollbar class="content-wrapper">-->
+      <model-index ref="table" v-if="show && uuid" :http="https" :uuid="uuid" style="height: calc(100% - 50px)"/>
+<!--      </el-scrollbar>-->
+
+    </div>
+    <template #footer>
+      <vxe-button @click="cancelEvent">取消</vxe-button>
+      <vxe-button status="primary" @click="ok">确认</vxe-button>
+    </template>
+  </el-dialog>
+</template>
+<script>
+
+import ModelIndex from "@/components/table/model/model-index.vue";
+
+export default {
+  name: 'olDialogTable',
+  components: {ModelIndex},
+  inject: ['http'],
+  props: {
+    name: {
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      title: undefined,
+      show: false,
+      uuid: undefined,
+      fullscreen: false,
+      width: '80%',
+      js: undefined,
+      style: 'height:70vh',
+    }
+  },
+  computed: {
+    https() {
+      return this.http;
+    }
+  },
+  methods: {
+    init({uuid, title, width, height,fullscreen,js}) {
+      this.show = true
+      this.uuid = uuid;
+      this.js = js;
+      if (width) {
+        this.width = width;
+      }
+      this.title = title;
+      this.fullscreen = fullscreen == true;
+      if (height) {
+        this.style = 'height:' + height + "px";
+      }
+    },
+    ok() {
+      this.$emit('emits',{js:this.js,v:this.$refs.table.$refs.tableModel.getSelectRows()});
+    },
+    cancelEvent() {
+      this.show = false
+    },
+  },
+}
+</script>
+<style scoped>
+.content-wrapper {
+  max-height: 60vh;
+  overflow-y: auto;
+  padding-right: 12px;
+}
+
+:deep(.content-wrapper)::-webkit-scrollbar {
+  width: 6px;
+}
+/deep/ .el-dialog__body {
+  max-height: calc(100vh - 200px);
+}
+</style>