ui-ddy-pc 0.0.1-beta

package/src/docs/unitTests/searchTest.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <search :searchConfig="searchConfig" @search="handleSearch"></search>
+  </div>
+</template>
+<script setup>
+import search from '../../components/topSearch/search.vue';
+
+import { reactive } from 'vue';
+const searchConfig = reactive({
+  data: {},
+  // 默认选中的搜索项的值 重置也保留此值
+  defaultData: { scope: 1 },
+  config: [
+    { label: '发料单号', field: 'code' },
+    { label: '材料名称', field: 'clName' },
+    {
+      label: '发料单来源', field: 'dataSourceList', type: 'select',
+      options: [
+        { value: "0", label: "磅房" },
+        { value: "1", label: "移动端" },
+        { value: "4", label: "拌合站" },
+        { value: "5", label: "盘点" }
+      ],
+      multiple: true
+    },
+    {
+      label: '是否关联', field: 'connStatus', type: 'select',
+      options: [
+        { value: "", label: "全部" },
+        { value: "0", label: "未关联" },
+        { value: "1", label: "已关联" }
+      ]
+    },
+    { label: '材料编号', field: 'clCode' },
+    { label: '仓库名称', field: 'warehouseName' },
+    { label: '磅房名称', field: 'poundRoomName' },
+    { label: '收料单位', field: 'gysName' },
+    { label: '合同名称', field: 'contractInfoName' },
+    {
+      label: '发料时间', field: 'time', type: 'daterange', startField: "createTimeBegin", endField: "createTimeEnd",
+      format: 'YYYY-MM-DD HH:mm:ss', valueFormat: 'YYYY-MM-DD HH:mm:ss'
+    },
+  ]
+})
+const handleSearch = (isReset) => {
+  console.log('查了', searchConfig.data);
+}
+</script>
+<style lang="scss" scoped>
+:deep(.search-container) {
+
+  position: relative;
+  min-height: 32px;
+
+  .search-row {
+    position: relative;
+
+    .item-label {
+      white-space: nowrap;
+    }
+
+    .buttons {
+      align-items: center;
+      margin-bottom: 18px;
+      display: inline-flex;
+      vertical-align: middle;
+
+      .btn {
+        display: flex;
+        align-items: center;
+        padding: 0px 20px;
+        cursor: pointer;
+        user-select: none;
+
+        .icon {
+          margin-top: 3px;
+        }
+
+        .text {
+          color: #303133;
+          font-size: 14px;
+          padding-left: 10px;
+        }
+      }
+    }
+
+    .row-item {
+      .el-col:nth-child(4n) {
+        .el-form-item {
+          margin-right: 0 !important;
+        }
+      }
+
+      position: absolute;
+      right: 0;
+    }
+
+    .el-form-item {
+      margin-right: 10px !important;
+    }
+
+    .individual {
+      display: flex;
+      flex-direction: row-reverse;
+    }
+  }
+}
+</style>

package/src/main.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import router from './router/index'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import locale from 'element-plus/es/locale/lang/zh-cn'
+
+const pinia = createPinia()
+const app = createApp(App)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+app.use(ElementPlus, {locale})
+app.use(router).use(pinia).mount('#app')

package/src/packages/index.js

@@ -0,0 +1,3 @@
+import TopTable from "@/components/topTable/topTable.vue";
+
+export { TopTable };

package/src/router/index.js

@@ -0,0 +1,24 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+
+const routes = [
+  {
+    path: "/",
+    name: "index",
+    component: () => import("@/components/tableTest.vue"),
+  },
+  {
+    path: "/searchTest",
+    name: "searchTest",
+    component: () => import("@/components/searchTest.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: routes,
+});
+
+router.beforeEach((to, from, next) => {
+  next();
+});
+export default router;

package/src/store/index.js

@@ -0,0 +1,35 @@
+import { defineStore } from "pinia";
+
+export const userStore = defineStore("store", {
+  state: () => {
+    return {
+      name: "cmps",
+      token: "",
+      subjectId: "",
+      subjectName: "",
+      origin: "",
+      users: {},
+      projectId: "",
+    };
+  },
+  actions: {
+    setToken(token) {
+      this.token = token;
+    },
+    setOrign(origin) {
+      this.origin = origin || "";
+    },
+    setUsers(users) {
+      this.users = users;
+    },
+    setSubjectId(subjectId) {
+      this.subjectId = subjectId;
+    },
+    setSubjectName(subjectName) {
+      this.subjectName = subjectName;
+    },
+    setProjectId(projectId) {
+      this.projectId = projectId;
+    },
+  },
+});

package/src/style.css

@@ -0,0 +1,73 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/utils/common.js

@@ -0,0 +1,254 @@
+import dayjs from "dayjs";
+import axios from "axios";
+import { userStore } from "@/store/index.js";
+import currency from "@/utils/currency.js";
+import qs from "qs";
+
+const urlParams = qs.parse(window.location.href.split("?")[1]);
+const env = import.meta.env;
+const store = userStore();
+function TableHead(label, prop, width = "") {
+  return {
+    label,
+    prop,
+    width,
+  };
+}
+
+function FormItem(label, field, span = 12) {
+  return {
+    label,
+    field,
+    span,
+  };
+}
+
+function SearchItem(label, field) {
+  return {
+    label,
+    field,
+  };
+}
+
+function formatDate(cellValue, pattern = "YYYY-MM-DD HH:mm:ss") {
+  if (!cellValue) return "";
+  return dayjs(cellValue).format(pattern);
+}
+
+// 配置项找到指定field对应items的下标
+function getItemsIndex(items, field) {
+  return items.findIndex((item) => item.field == field);
+}
+function resolveFile(res, fileName) {
+  const aLink = document.createElement("a");
+  aLink.style.display = "none";
+  const blob = new Blob([res.data], { type: "" });
+  aLink.href = URL.createObjectURL(blob);
+  aLink.setAttribute("download", fileName); // 设置下载文件名称
+  document.body.appendChild(aLink);
+  aLink.click();
+  URL.revokeObjectURL(aLink.href); //清除引用
+  document.body.removeChild(aLink);
+}
+async function exportBlob(
+  callback,
+  params,
+  fileName,
+  loading,
+  isPost = false,
+  afterSuc = null
+) {
+  const baseUrl = store.origin
+    ? store.origin + "/" + env.VITE_BASE_API
+    : env.VITE_BASE_API;
+  let str = "";
+  if (!isPost) {
+    for (let key in params) {
+      if (params[key] || params[key] == 0) {
+        str += "&" + key + "=" + params[key];
+      }
+    }
+  }
+  loading.value = true;
+  axios({
+    method: isPost ? "post" : "get",
+    url: isPost
+      ? baseUrl + `${callback}`
+      : baseUrl + `${callback}?${str.slice(1)}`,
+    ...(isPost ? { data: params } : {}),
+    responseType: "blob",
+    headers: { Authorization: "Bearer " + store.token },
+  })
+    .then((res) => {
+      if (!res.data) {
+        this.$message.error("下载失败，解析数据为空！");
+        return;
+      }
+      resolveFile(res, fileName);
+      afterSuc ? afterSuc() : "";
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function fixDigits(val, digits) {
+  return currency(val, { precision: digits }).value;
+}
+
+// 限制输入框小数
+function limitDecimal(val, digits) {
+  // 去除多个0
+  let tmp = val.replace(/^0+(\d+(\.\d+)?)$/, "$1");
+  // 配置保留几位小数
+  const regExp = new RegExp(
+    "^\\D*(\\d{0,9}(?:\\.\\d{0," + digits + "})?).*$",
+    "g"
+  );
+  return tmp.replace(regExp, "$1");
+}
+
+function judgePermi(val) {
+  // 测试环境取不到 默认true
+  if (env.VITE_NODE_ENV !== "env") {
+    console.log(
+      window.$wujie?.props.hasPermission(val),
+      "window.$wujie?.props.hasPermission(val)"
+    );
+    return window.$wujie?.props.hasPermission(val);
+  } else {
+    return true;
+  }
+}
+
+function isCreatBy(userId) {
+  if (env.VITE_NODE_ENV !== "env") {
+    if (!userId) {
+      return false;
+    }
+    // 兼容代办链接中获取userId
+    return store.users?.userId
+      ? store.users?.userId == userId
+      : urlParams?.userId == userId;
+  } else {
+    return true;
+  }
+}
+
+function handleIndex(data, pageNum, pageSize) {
+  const num = (pageNum - 1) * pageSize;
+  return data.$index + num + 1;
+}
+
+// 判断内容是否超长显示了省略号
+function judgeOverflow(el, disabled) {
+  let element = el.target;
+  let style = window.getComputedStyle(element);
+  let availableWidth =
+    element.clientWidth -
+    parseFloat(style.paddingLeft) -
+    parseFloat(style.paddingRight);
+
+  const range = document.createRange();
+  // 设置 range 的起点
+  range.setStart(element, 0);
+  // 设置 range 的终点，因为起终点都在同一个节点上，所以设置终点偏移量以选中节点的内容
+  range.setEnd(element, element.childNodes.length);
+  // 获取节点的内容的宽度
+  const rangeWidth = range.getBoundingClientRect().width;
+
+  if (rangeWidth > availableWidth) {
+    disabled.value = false;
+  } else {
+    disabled.value = true;
+  }
+}
+
+// 处理报表中文编码
+function cjkEncode(text) {
+  if (text == null) {
+    return "";
+  }
+  var newText = "";
+  for (var i = 0; i < text.length; i++) {
+    var code = text.charCodeAt(i);
+    if (
+      code >= 128 ||
+      code == 91 ||
+      code == 35 ||
+      code == 43 ||
+      code == 45 ||
+      code == 93
+    ) {
+      newText += "[" + code.toString(16) + "]";
+    } else {
+      newText += text.charAt(i);
+    }
+  }
+  return newText;
+}
+
+// 查找指定节点
+function getTreeNode(data, key, value) {
+  let result = null;
+  data.forEach((item) => {
+    if (result) {
+      return; // 如果已找到结果，则终止当前循环
+    }
+    if (item[key] === value) {
+      result = item;
+      return; // 终止当前循环
+    } else if (item.children && item.children.length > 0) {
+      result = getTreeNode(item.children, key, value);
+      if (result) {
+        return; // 终止当前循环
+      }
+    }
+  });
+  return result;
+}
+// 查找指定节点及其所有父级
+function handleAncestors(data, nodeKey, value) {
+  const ancestorNodes = [];
+  const findAncestors = (currentNode, nodeKey, value) => {
+    if (currentNode[nodeKey] === value) {
+      return true;
+    }
+    if (currentNode.children) {
+      for (let child of currentNode.children) {
+        if (findAncestors(child, nodeKey, value)) {
+          ancestorNodes.push(currentNode);
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  for (let node of data) {
+    findAncestors(node, nodeKey, value);
+  }
+  return ancestorNodes;
+}
+
+const limitPercentage = (val) => {
+  // 去除除数字及小数点外的中英文特殊符号 去除多个0
+  return val.replace(/[^\d.]+/g, "").replace(/^0+(\d+(\.\d+)?)$/, "$1");
+};
+
+export {
+  TableHead,
+  FormItem,
+  SearchItem,
+  getItemsIndex,
+  exportBlob,
+  formatDate,
+  fixDigits,
+  limitDecimal,
+  judgePermi,
+  isCreatBy,
+  handleIndex,
+  judgeOverflow,
+  cjkEncode,
+  getTreeNode,
+  handleAncestors,
+  limitPercentage,
+};