gggg

src/views/enterprise/export_work.vue

@@ -10,7 +10,7 @@
         <el-col :span="6">项目结束日期：xxxx年xx月xx日</el-col>
         <el-col :span="6">项目组重复：3次</el-col>
       </el-row>
-      <el-table :data="properties" border style="width: 100%">
+      <el-table :data="properties" border style="width: 100%;overflow-x: auto;">
         <el-table-column fixed prop="property" label="序号" width="100"></el-table-column>
         <el-table-column
           v-for="(product, index) in products"
@@ -37,8 +37,9 @@
       <el-row>
         <el-col :span="24" class="header">组重复排序</el-col>
       </el-row>
-      <el-table border style="width: 100%;" height="45">
-        <el-table-column fixed label="序号" width="100"></el-table-column>
+      <!--      第一组-->
+      <el-table border style="width: 100%;overflow-x: auto;" height="45">
+        <el-table-column fixed label="一次重复" width="100"></el-table-column>
         <el-table-column
           v-for="(product) in products1"
           :label="product['序号']" width="100"
@@ -47,30 +48,35 @@
       </el-table>
       <p style="font-size: 12px;color: red;margin-top: 5px">***第一组数据不可编辑</p>
       <!--        第二组-->
-      <el-table border style="width: 100%;margin-top: 1%" height="45">
-        <el-table-column fixed label="序号" width="100"></el-table-column>
-        <el-table-column
-          v-for="(product) in products2"
-          :label="product['序号']" width="100"
-        >
-        </el-table-column>
-      </el-table>
-      <el-tooltip class="item" effect="dark" content="点击后序号将往后顺移一位" placement="right">
-        <el-button @click="shiftData1">移位按钮</el-button>
-      </el-tooltip>
+      <div style="display: flex;width: 100%;margin-top: 1%">
+        <el-table border style="width: 80%;overflow-x: auto;" height="50">
+          <el-table-column fixed label="二次重复" width="100"></el-table-column>
+          <el-table-column
+            v-for="(product) in products2"
+            :label="product['序号']" width="100"
+          >
+          </el-table-column>
+        </el-table>
+        <el-tooltip class="item" effect="dark" content="点击后序号将往后顺移一位" placement="right">
+          <el-button @click="shiftData1" style="height: 50px">移位按钮</el-button>
+        </el-tooltip>
+      </div>
 
+      <!--      第三组-->
+      <div style="display: flex;width: 100%;margin-top: 1%">
+        <el-table border style="width: 80%;overflow-x: auto;" height="50">
+          <el-table-column fixed label="三次重复" width="100"></el-table-column>
+          <el-table-column
+            v-for="(product) in products3"
+            :label="product['序号']" width="100"
+          >
+          </el-table-column>
+        </el-table>
+        <el-tooltip class="item" effect="dark" content="点击后序号将往后顺移一位" placement="right">
+          <el-button @click="shiftData2">移位按钮</el-button>
+        </el-tooltip>
+      </div>
 
-      <el-table border style="width: 100%;margin-top: 1%" height="45">
-        <el-table-column fixed label="序号" width="100"></el-table-column>
-        <el-table-column
-          v-for="(product) in products3"
-          :label="product['序号']" width="100"
-        >
-        </el-table-column>
-      </el-table>
-      <el-tooltip class="item" effect="dark" content="点击后序号将往后顺移一位" placement="right">
-        <el-button @click="shiftData1">移位按钮</el-button>
-      </el-tooltip>
       <div style="display: flex;width: 100%">
         <p style="display:inline-block;width: 20%">重点强调：</p>
         <el-input
@@ -98,22 +104,35 @@ export default {
         { 序号: '01-04', 产品名称: '示例产品4', 产品代码: '004', 实验密度: '5000' }
       ],
       products1: [
-        { 序号: '01-01' },
-        { 序号: '01-02' },
-        { 序号: '01-03' },
-        { 序号: '01-04' }
+        {序号: '01-01'},
+        {序号: '01-02'},
+        {序号: '01-03'},
+        {序号: '01-04'}
       ],
       products2: [
-        { 序号: '01-01' },
-        { 序号: '01-02' },
-        { 序号: '01-03' },
-        { 序号: '01-04' }
+        {序号: '01-01'},
+        {序号: '01-02'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-03'},
+        {序号: '01-04'}
       ],
       products3: [
-        { 序号: '01-01' },
-        { 序号: '01-02' },
-        { 序号: '01-03' },
-        { 序号: '01-04' }
+        {序号: '01-01'},
+        {序号: '01-02'},
+        {序号: '01-03'},
+        {序号: '01-04'}
       ],
       materialsAmount: '',
       selectedUnit: '',
@@ -128,27 +147,27 @@ export default {
   },
   computed: {
     properties() {
-      const props = ['产品名称', '产品代码', '实验密度']
+      const props = ['产品名称', '产品代码', '实验密度'];
       return props.map(prop => ({
         property: prop,
         ...this.products.reduce((acc, product, index) => ({
           ...acc,
           [`value${index}`]: product[prop]
         }), {})
-      }))
+      }));
     }
   },
   methods: {
     shiftData1() {
-      if (this.products2.length > 1) { // 确保数组至少有两个元素
-        const lastItem = this.products2.pop() // 移除最后一个元素并保存
-        this.products2.unshift(lastItem)      // 将移除的最后一个元素添加到数组的开头
+      if (this.products2.length > 1) {
+        const lastItem = this.products2.pop();
+        this.products2.unshift(lastItem);
       }
     },
     shiftData2() {
-      if (this.products3.length > 1) { // 确保数组至少有两个元素
-        const lastItem = this.products3.pop() // 移除最后一个元素并保存
-        this.products3.unshift(lastItem)      // 将移除的最后一个元素添加到数组的开头
+      if (this.products3.length > 1) {
+        const lastItem = this.products3.pop();
+        this.products3.unshift(lastItem);
       }
     }
   }