olp-table 5.3.1 → 5.3.4

package/src/components/ol-dialog-upload-file.vue

@@ -0,0 +1,208 @@
+<template>
+  <el-dialog v-model="show" :title="title"
+             :width="800" show-footer @close="close">
+    <template #default>
+      <div v-loading="loading">
+        <el-upload
+            ref="uploadRef"
+            v-model:file-list="fileList"
+            :multiple="multiple"
+            :on-change="onchange"
+            :auto-upload="false">
+          <template #trigger>
+            <el-button type="primary" ref="selectFiles">选择文件</el-button>
+          </template>
+          <template #tip>
+            <div class="el-upload__tip">
+              当前文件：<span style="color: red">{{ fileList.length }}个</span>
+              ，已成功上传：<span style="color: green">{{ okIndex }}个</span>
+            </div>
+          </template>
+          <template #file="{file}">
+            <div style="padding: 6px;font-size: 15px;border-bottom:1px solid #caced0">
+              {{ file.name }}
+              <span style="float: right">
+            {{ file.percentCompleted ? file.percentCompleted : '未上传' }}
+            <el-button type="primary" size="small" @click="uploadFile(getFile(file.uid))">上传</el-button>
+            <el-button type="danger" size="small" @click="fileList.splice(getFile(file.uid),1)"
+                       v-if="file.percentCompleted == '上传失败'">删除</el-button>
+              <el-tooltip
+                  class="box-item"
+                  effect="dark"
+                  :content="file.message"
+                  placement="right"
+              >
+        <el-button v-if="file.message" size="small">原因</el-button>
+      </el-tooltip>
+          </span>
+            </div>
+          </template>
+        </el-upload>
+      </div>
+    </template>
+    <template #footer>
+      <el-button @click="close">返回</el-button>
+      <el-button type="primary" @click="uploadFile" :loading="loading">全部上传</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+
+import {upload} from "@/utils/http/httpUtils";
+import {useMessage} from "@/utils/message";
+
+export default {
+  name: 'olDialogUploadFile',
+  inject: ['http'],
+  data() {
+    return {
+      title: '上传文件',
+      show: false,
+      fileList: [],
+      okIndex: 0,
+      multiple: true,
+      loading: true,
+      url: '',
+      autoClose: false,
+      query: false,
+      js: '',
+      okFileInfos: [],
+    }
+  },
+  methods: {
+    getFile(uid) {
+      for (let i = 0; i < this.fileList.length; i++) {
+        if (this.fileList[i].uid == uid) {
+          return i;
+        }
+      }
+    },
+    onchange(file, fileList) {
+      this.fileList = fileList;
+      if (this.multiple == false) {
+        this.uploadFile();
+      } else {
+        this.loading = false;
+      }
+    },
+    async uploadFile(index) {
+      if (this.fileList.length == 0) {
+        useMessage().error("请选择文件！");
+        return;
+      }
+      let length = this.fileList.length;
+      let i = 0;
+      let thIndex = index == undefined || typeof index !== 'number' ? 0 : index;
+      console.info("thIndex", thIndex);
+      this.loading = true;
+      while (i < length) {
+        let file = this.fileList[thIndex];
+        console.info(file.name + "上传中...", file);
+        file.percentCompleted = 0;
+        const formData = new FormData();
+        formData.append('files', file.raw);
+        //调用文件上传接口
+        await upload(this.http, this.url, formData, progressEvent => {
+          const percentCompleted = Math.round((progressEvent.loaded * 100) /
+              progressEvent.total)
+          file.percentCompleted = percentCompleted + "%";
+        }).then(({code, msg, data}) => {
+          if (code === 200 || code === 0) {
+            this.okFileInfos.push(
+                {
+                  name: file.name,
+                  path: data?.path,
+                  configId: data?.configId,
+                  suffix:this.getFileExtension(file.name)
+                });
+            this.okIndex++;
+            this.fileList.splice(thIndex, 1)
+          } else {
+            file.percentCompleted = "上传失败";
+            file.message = msg;
+            thIndex++;
+          }
+        }).catch(error => {
+          thIndex++;
+          // 上传失败处理逻辑
+          console.error('上传失败', error);
+        });
+        // if (index != undefined) {
+        //   break
+        // }
+        i++;
+      }
+      this.loading = false;
+      if (this.okIndex === 0) {
+        useMessage().error("上传失败！")
+      } else {
+        // console.info('上传成功文件：', this.okFileInfos);
+        useMessage().success("上传成功！")
+        if (this.autoClose || this.multiple == false) {
+          this.close();
+        }
+      }
+    },
+    getFileExtension(filename) {
+      // 检查字符串是否有效
+      if (typeof filename !== 'string') {
+        return '';
+      }
+      // 使用 lastIndexOf 和 substring 方法提取后缀
+      const lastDotIndex = filename.lastIndexOf('.');
+      // 如果找不到点，返回空字符串，表示没有后缀
+      if (lastDotIndex === -1) {
+        return '';
+      }
+      // 提取并返回后缀名（不包括点）
+      return filename.substring(lastDotIndex + 1);
+    },
+    close() {
+      let args = {
+        js: this.js,
+        v: this.okFileInfos,
+      }
+      if (this.okIndex !== 0 && this.query) {
+        args.m = 'query'
+      }
+      // console.info("关闭上传文件窗口!!!!!!!!", args);
+      this.$emit("emits", args);
+
+      this.show = false;
+    },
+    init(obj) {
+      this.okFileInfos = [];
+      this.fileList = [];
+      this.okIndex = 0;
+      let {url, title, autoClose, multiple, query, js} = obj;
+      if (!url) {
+        url = obj;
+      }
+      if (!url) {
+        useMessage().error("请填写上传文件url!");
+        return
+      }
+      this.query = query != false;
+      this.js = js;
+      this.show = true;
+      this.url = url;
+      this.title = title ? title : this.title;
+      this.autoClose = autoClose != undefined ? autoClose : this.autoClose;
+      this.multiple = multiple != undefined ? multiple : this.multiple;
+      this.$nextTick(() => {
+        this.$refs.selectFiles.$el.click();
+        setTimeout(() => {
+          this.loading = false;
+        }, 300)
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+/deep/ .el-upload-list {
+  overflow-x: auto;
+  height: 300px;
+}
+</style>

package/src/components/ol-dict-tag.vue

@@ -0,0 +1,271 @@
+<template>
+  <el-radio-group v-model="value" @change="change" v-if="props.type == 'radio'">
+    <el-radio v-for="item in options" :label="item[props.label]" :value-key="props.value"
+              :value="item[props.value]" :border="props.border">{{ item.label }}
+    </el-radio>
+  </el-radio-group>
+  <el-checkbox-group v-model="value" @change="change" v-else-if="props.type == 'checkbox'">
+    <el-checkbox v-for="item in options" :label="item[props.label]" :value-key="props.value"
+                 :value="item[props.value]" :border="props.border">{{ item.label }}
+    </el-checkbox>
+  </el-checkbox-group>
+  <el-select ref="dictTag" v-else v-model="value" :placeholder="placeholder"
+             :clearable="props.clearable"
+             v-bind="$attrs"
+             :loading="loading"
+             @clear="clear"
+             @change="change"
+             @visible-change="visibleChange"
+             :filter-method="filterMethod"
+             filterable>
+    <el-option v-for="item in options" :label="item[props.label]" :value-key="props.value"
+               :value="item[props.value]"></el-option>
+  </el-select>
+</template>
+
+<script scope setup>
+import {nextTick, ref, defineProps, defineEmits, onMounted, defineExpose, watch, inject} from 'vue'
+
+import {storeDictType} from "@/store/dictType";
+import {storeDict} from "@/store/dict";
+import {initDictTag} from "@/api/dist";
+
+const http = inject("http")
+const dict = storeDict();
+const dictType = storeDictType();
+const props = defineProps({
+  border: {default: false, type: Boolean},
+  type: {default: 'select'},
+  code: {},
+  like: {},
+  placeholder: {default: '可搜索'},
+  clearable: {default: true, type: Boolean},
+  modelValue: {required: true},
+  dictType: {default: false, type: Boolean},
+  label: {default: 'dictLabel'},
+  value: {default: 'dictValue'},
+  orderBy: {default: undefined, type: Array},
+  groupBy: {default: undefined, type: Array},
+  whereAnd: {default: []},
+  whereOr: {default: []},
+  //[{String key:''value:'',type:''}]//type 查询类型 默认等于1--> 1：= 2：!=  3: > 4:< 5: >= 6: <= 7:like '%value' 8:like '%value%' 9:like 'value%'
+  disabledInit: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  data: {default: []}
+})
+const loading = ref(false)
+const ex = ref(0)
+const value = ref(undefined)
+watch(() => props.modelValue, () => {
+  if (props.type == 'checkbox') {
+    value.value = Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue + '']
+  } else {
+    value.value = props.modelValue + ''
+  }
+}, {
+  deep: true // 开启深度监听
+})
+
+const getValue = () => {
+  if (!props.modelValue) {
+    return
+  }
+  if (props.type == 'checkbox') {
+    return Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue + '']
+  } else {
+    return props.modelValue + ''
+  }
+}
+
+const options = ref([]);
+let optionsBk = ref([]);
+const isDictTable = ref(false);
+onMounted(() => {
+  dict.init(http)
+  dictType.init(http)
+  if (!props.disabledInit) {
+    nextTick(() => {
+      init();
+      value.value = getValue()
+    })
+  }
+})
+
+function doFilterMethod(o) {
+  if (optionsBk.value.length == 0) {
+    optionsBk.value = options.value;
+  }
+  let data = optionsBk.value.filter(option =>
+      option[props.label].toLowerCase().includes(o ? o.trim().toLowerCase() : '')
+  );
+  options.value = data;
+}
+
+function getParameter(valueData) {
+  let code = props.code.split(",");
+  let whereAnd = JSON.parse(JSON.stringify(props.whereAnd));
+  let whereOr = JSON.parse(JSON.stringify(props.whereOr));
+  let parameter = {
+    dbName: code[0],
+    tableName: code[1],
+    label: code[2],
+    value: code[3],
+    orderByStr: props.orderBy,
+    groupBy: props.groupBy,
+    whereAnd: whereAnd,
+    whereOr: whereOr
+  }
+  if (valueData) {
+    loading.value = true
+    initDictTag(http, parameter).then(data => {
+      options.value = data;
+      let existValue = data.map(item => item[props.value]);
+      let initValue = [];
+      if (props.modelValue instanceof Array) {
+        for (const modelValue of props.modelValue) {
+          if (modelValue != undefined && existValue.indexOf(modelValue) == -1) {
+            initValue.push(modelValue)
+          }
+        }
+      } else {
+        if (props.modelValue != undefined && existValue.indexOf(props.modelValue) == -1) {
+          initValue.push(props.modelValue)
+        }
+      }
+      value.value = props.modelValue;
+      if (initValue.length != 0) {
+        for (const modelValue of initValue) {
+          if (modelValue) {
+            parameter.whereAnd.push({key: parameter.value, value: modelValue})
+          }
+        }
+        initDictTag(http, parameter).then(data => {
+          options.value = [...options.value, ...data];
+          value.value = props.modelValue;
+        })
+      }
+    }).finally(() => {
+      loading.value = false
+    })
+  } else {
+    return parameter;
+  }
+}
+
+async function filterMethod(o) {
+
+  if (isDictTable.value == false) {
+    doFilterMethod(o);
+  } else {
+    nextTick(() => {
+      ex.value++;
+      if (ex.value == 1) {
+        getParameter(true);
+      } else {
+        let parameter = getParameter();
+        if (o) {
+          parameter.whereAnd.push({key: parameter.label, value: o, type: 8})
+          if (props.like) {
+            let like = props.like.split(",");
+            for (let key of like) {
+              parameter.whereOr.push({key: key, value: o, type: 8})
+            }
+          }
+        }
+        loading.value = true
+        initDictTag(http, parameter).then(data => {
+          options.value = data;
+        }).finally(() => {
+          loading.value = false
+        })
+      }
+    })
+  }
+}
+
+
+async function init() {
+  if (props.code) {
+    let code = props.code.split(",");
+    //逗号分割是查询数据表
+    if (code.length < 3) {
+      //查询数据字典
+      options.value = dict.val(props.code);
+      setDefault(options.value);
+    } else {
+      isDictTable.value = true;
+      getParameter(true)
+    }
+  } else if (props.dictType) {
+    options.value = dictType.val();
+  } else {
+    options.value = props.data;
+  }
+
+}
+
+function setDefault(res) {
+  if (res == undefined || (props.value.modelValue != undefined && props.value.modelValue != "")) {
+    return
+  }
+  for (let o of res) {
+    if (o.isDefault == 1) {
+      value.value = o.dictValue.toString()
+      emits("update:modelValue", o.dictValue.toString());
+    }
+  }
+}
+
+function getLabel(code) {
+  if (!code) {
+    code = value.value;
+  }
+  for (const option of this.options) {
+    if (option[props.value] == code) {
+      return option[props.label];
+    }
+  }
+}
+
+function getObj(code) {
+  if (!code) {
+    code = value.value;
+  }
+  for (const option of this.options) {
+    if (option[props.value] == code) {
+      return option;
+    }
+  }
+}
+
+function clear() {
+  filterMethod();
+}
+
+function change(e) {
+  emits("update:modelValue", value.value == undefined ? '' : value.value)
+  emits("change", e);
+}
+
+function visibleChange(par) {
+  if (par) {
+    ex.value = 0;
+  }
+}
+
+// 子组件调用父组件
+const emits = defineEmits(['update:modelValue', 'change']); //声明 emits
+defineExpose({
+  init,
+  getLabel,
+  getObj,
+})
+</script>
+<script>
+export default {
+  name: "olDictTag",
+};
+</script>

package/src/components/ol-select-dom.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-date-picker
+      v-if="item.domDate"
+      v-model="localValue"
+      v-bind="item"
+      :type="item.domType"
+      style="width: 100%"
+      :value-format="item.domFormat"
+      :placeholder="item.placeholder"
+      @change="handleChange"
+  />
+  <el-radio-group @change="handleChange" v-else-if="item.selectDom == 4" v-model="localValue" v-bind="item">
+    <!-- 修正 v-for 语法并添加 :key 绑定 -->
+    <el-radio
+        v-for="(obj, index) in item.options"
+        :key="obj.id || index"
+        :label="obj.value"
+        :value="obj.value"
+    >{{obj.label}}</el-radio>
+  </el-radio-group>
+  <el-checkbox-group @change="handleChange" v-else-if="item.selectDom == 5" v-model="localValue" v-bind="item">
+    <el-checkbox
+        v-for="(obj, index) in item.options"
+        :key="index"
+        :label="obj.label"
+        :value="obj.value"
+    > </el-checkbox>
+  </el-checkbox-group>
+  <el-select @change="handleChange" style="width: 100%" v-else-if="item.options" v-model="localValue" v-bind="item">
+    <el-option
+        v-for="(obj, index) in item.options"
+        :key="obj.id || index"
+        :label="obj.label"
+        :value="obj.value"
+    ></el-option>
+  </el-select>
+  <span v-else>
+    {{ item.selectDom }}-未开发
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'olSelectDom',
+  props: {
+    modelValue: {
+      required: true
+    },
+    item: {
+      required: true
+    }
+  },
+  data() {
+    return {
+      localValue: this.modelValue
+    };
+  },
+  watch: {
+    modelValue(newValue) {
+      this.localValue = newValue;
+    }
+  },
+  methods: {
+    handleChange(newValue) {
+      this.localValue = newValue;
+      this.$emit('update:modelValue', newValue);
+      this.$emit('updateOk', newValue);
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,28 @@
+<template>
+  <span v-for="(option, index) in $attrs.event.column.filters" :key="index">
+          <el-input v-model="option.data" style="width: 100%;" placeholder="关键字搜索" clearable
+                    @input="changeNameFilter(option)"
+                    @change="changeNameFilter(option)">
+          </el-input>
+        </span>
+</template>
+<script>
+export default {
+  name: 'olTableFilter',
+  methods: {
+    changeNameFilter(option) {
+      option.checked = true;
+      this.$attrs.event.$grid.updateData();
+    },
+    filterMethod({option, row, column}) {
+      if (option.data && row[column.field]) {
+        return row[column.field].indexOf(option.data) != -1
+      }
+      return true
+    }
+  },created() {
+    this.$attrs.event.column.filters= [{data: ''}]
+    this.$attrs.event.column.filterMethod = this.filterMethod;
+  }
+}
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <el-date-picker
+      v-if="item.selectDom === 3 || item.selectDom === 6"
+      v-model="localValue"
+      v-bind="$attrs"
+      style="width: 100%"
+      :type="item.selectDom === 3 ? 'datetime' : 'date'"
+      :value-format="item.selectDom === 3 ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'"
+      :placeholder="item.placeholder"
+      @change="handleChange"
+  />
+</template>
+
+<script>
+export default {
+  name: 'olSelectDom',
+  props: {
+    modelValue: {
+      type: String,
+      required: true
+    },
+    item: {
+      required: true
+    }
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      localValue: this.modelValue
+    };
+  },
+  watch: {
+    modelValue(newValue) {
+      this.localValue = newValue;
+    }
+  },
+  methods: {
+    handleChange(newValue) {
+      this.localValue = newValue;
+      this.$emit('update:modelValue', newValue);
+    }
+  }
+};
+</script>