qx
qx
2025-04-03 7cc7aac8bd386f5d6f33239557c1878a83d7346a
qx
5个文件已修改
3个文件已添加
97 ■■■■■ 已修改文件
package.json 2 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
postcss.config.js 19 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/main.js 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/mixins/responsive-inline.js 34 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/utils/rem.js 24 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/index.vue 6 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/reservation/resercopy/index.vue 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/sampling/sampling/index.vue 6 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
package.json
@@ -55,6 +55,8 @@
    "moment": "^2.29.4",
    "nprogress": "0.2.0",
    "pinyin-match": "^1.2.2",
    "postcss-px-to-viewport": "^1.1.1",
    "postcss-pxtorem": "^5.1.1",
    "print-js": "^1.6.0",
    "quill": "1.3.7",
    "screenfull": "5.0.2",
postcss.config.js
New file
@@ -0,0 +1,19 @@
module.exports = {
    plugins: {
        // 'postcss-pxtorem': {
        //     rootValue: 19, // 表示根元素字体大小或根据input参数返回根元素字体大小
        //     propList: ['*'], // 可以从px更改为rem的属性, 通配符*表示启用所有属性
        //     selectorBlackList: ['.norem'] // 过滤掉.norem开头的class,不进行rem转换
        // },
        'postcss-px-to-viewport': {
            viewportWidth: 1920,        // 设计稿宽度(如750px的UI稿)
            unitPrecision: 3,          // 转换后单位的小数位数
            viewportUnit: 'vw',        // 目标单位(推荐vw)
            selectorBlackList: ['.ignore', 'vant'], // 不转换的类名(如第三方组件库)
            minPixelValue: 1,          // 小于等于1px的值不转换
            mediaQuery: false,         // 媒体查询中的px不转换
            exclude: /node_modules/    // 排除node_modules目录
          }
    }
}
src/main.js
@@ -16,7 +16,7 @@
import Print from "vue-print-nb";
import JsonExcel from "vue-json-excel";
import '@/utils/rem.js'; //在main.js中引入rem.js
Vue.component("downloadExcel", JsonExcel);
import "./assets/icons"; // icon
src/mixins/responsive-inline.js
New file
@@ -0,0 +1,34 @@
import { debounce } from 'lodash';
export default {
    methods: {
        getResponsiveStyles() {
            const width = window.innerWidth;
            if (width < 576) {
                return 'font-size: 14px !important; padding: 8px !important;';
            } else if (width < 768) {
                return 'font-size: 16px !important; padding: 12px !important;';
            } else {
                return 'font-size: 18px !important; padding: 16px !important;';
            }
        }
    },
    mounted() {
        this.makeInlineStylesResponsive();
        window.addEventListener('resize', debounce(this.makeInlineStylesResponsive, 200));
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.makeInlineStylesResponsive);
    },
    methods: {
        makeInlineStylesResponsive() {
            const elements = this.$el.querySelectorAll('[style]');
            elements.forEach(el => {
                const originalStyle = el.getAttribute('style');
                el.setAttribute('style', `
            ${originalStyle};
            ${this.getResponsiveStyles()}
          `);
            });
        }
    }
}
src/utils/rem.js
New file
@@ -0,0 +1,24 @@
// 配置基本大小
let baseSize = 19;
// 设置 rem 函数
function setRem () {
    //当前页面宽度相对于1920px屏幕宽的缩放比例,可根据自己需要修改。
    let scale = document.documentElement.clientWidth / 1920;
    console.log(scale,2222)
    //设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
setRem(); //初始化
// 适配 - 重置函数
function resetRem (num) {
    if(num) baseSize = Number(num);
    setRem();
}
window.resetRem = resetRem; // 全局可调用(其他方式也可)
// 改变窗口大小时重置 rem
window.onresize = function () {
    setRem()
};
src/views/index.vue
@@ -41,7 +41,7 @@
      <h4>近一月统计</h4>
    </div>
    <div class="data-view">
      <div id="main" style="width:95%;height:330px"></div>
      <div id="main"></div>
    </div>
    <div class="view">
      <div id="main2"></div>
@@ -414,7 +414,7 @@
.day {
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  font-size: 14px;
}
.data-view {
@@ -424,6 +424,8 @@
#main {
  padding: 10px;
  width:95%;
  height:330px
}
.view {
src/views/reservation/resercopy/index.vue
@@ -209,6 +209,7 @@
      <el-upload
        ref="upload"
        :limit="1"
        :key="uploadKey"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :data="data"
@@ -637,6 +638,7 @@
        ],
      },
      ListObj: {},
      uploadKey:0,
      // 遮罩层
      loading: true,
      pacStatus: "启用",
@@ -873,6 +875,8 @@
    /** 导入按钮操作 */
    handleImport() {
      if (this.objs.drugManufacturerId && this.objs.reservationTime) {
        this.$refs.upload?.clearFiles();
        this.uploadKey = Date.now(); // 改变 key 强制重新渲染组件
        this.upload.title = "用户导入";
        this.upload.open = true;
      } else {
src/views/sampling/sampling/index.vue
@@ -105,7 +105,7 @@
      </div>
      <div style="width: 50%">
        <!-- v-if="this.rightTabShow" -->
        <el-table v-if="tableList.length > 0" v-loading="loading" :data="tableList" @selection-change="handleChange"
        <el-table :row-key="getRowKey" v-if="tableList.length > 0" v-loading="loading" :data="tableList" @selection-change="handleChange"
          :span-method="objectSpanMethod" ref="tab1" :row-class-name="tableRowClassName" border height="520px">
          <el-table-column type="selection" width="40" align="center" />
          <!--  :selectable="selectEnable" -->
@@ -662,6 +662,10 @@
      console.log(`是否禁用选择: ${this.disableSelections}`);
    },
    getRowKey(row) {
      return row.id; // 必须唯一且稳定
    },
    fetchData(tjNumber) {
      return new Promise((resolve, reject) => {
        this.loading = true;