src/views/enterprise/exportOutput.vue

@@ -1,63 +1,106 @@
 <template>
-  <div class="prep-materials" style="margin-top: 3%">
-    <el-row>
-      <el-col :span="24" class="header">xxxx公司2024-01组试验备料单</el-col>
-    </el-row>
-    <el-row class="details">
-      <el-col :span="6">组编码：2024-01</el-col>
-      <el-col :span="6">创建日期：xxxx年xx月xx日</el-col>
-      <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-column fixed prop="property" label="序号" width="180"></el-table-column>
-      <el-table-column
-        v-for="(product, index) in products"
-        :key="index"
-        :prop="`value${index}`"
-        :label="product['序号']">
-      </el-table-column>
-    </el-table>
-    <el-form>
-      <el-form-item label="单品备料/份：">
-        <el-input v-model="materialsAmount" placeholder="请输入备料量"></el-input>
-        <el-select v-model="selectedUnit" placeholder="请选择单位">
-          <el-option label="粒" value="粒"></el-option>
-          <el-option label="袋" value="袋"></el-option>
-          <el-option label="克" value="克"></el-option>
-          <el-option label="公斤" value="公斤"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="辅助材料：">
-        <el-input v-model="auxiliaryMaterial" placeholder="请输入辅助材料"></el-input>
-      </el-form-item>
-    </el-form>
-    <el-divider></el-divider>
-    <el-row>
-      <el-col :span="24">材料邮寄或接料人信息：</el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="8">接料人：
-        <el-input v-model="receiverName1" placeholder="姓名"></el-input>
-      </el-col>
-      <el-col :span="8">电话：
-        <el-input v-model="receiverPhone1" placeholder="电话号码"></el-input>
-      </el-col>
-      <el-col :span="8">地址：
-        <el-input v-model="receiverAddress1" placeholder="地址"></el-input>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :span="8">接料人：
-        <el-input v-model="receiverName2" placeholder="姓名"></el-input>
-      </el-col>
-      <el-col :span="8">电话：
-        <el-input v-model="receiverPhone2" placeholder="电话号码"></el-input>
-      </el-col>
-      <el-col :span="8">地址：
-        <el-input v-model="receiverAddress2" placeholder="地址"></el-input>
-      </el-col>
-    </el-row>
+  <div class="prep-materials" style="width: 90%;margin-left: 10%">
+    <div style="width: 60%">
+      <el-row>
+        <el-col :span="24" class="header">xxxx公司2024-01组试验备料单</el-col>
+      </el-row>
+      <el-row class="details" style="font-size: 14px;margin-top: 3%">
+        <el-col :span="6">组编码：2024-01</el-col>
+        <el-col :span="6">创建日期：xxxx年xx月xx日</el-col>
+        <el-col :span="6">项目结束日期：xxxx年xx月xx日</el-col>
+        <el-col :span="6">项目组重复：3次</el-col>
+      </el-row>
+      <el-table :data="properties" border style="">
+        <el-table-column fixed prop="property" label="序号" ></el-table-column>
+        <el-table-column
+          v-for="(product, index) in products"
+          :key="index"
+          :prop="`value${index}`"
+          :label="product['序号']" width="">
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <div style="margin-top: 5%;width: 90%">
+      <el-form style="width: 100%;display: flex">
+        <div style="width: 20%;display: flex;">
+<!--          <el-form-item label="" style="display: flex;">-->
+            <span style="font-size: 14px;font-weight: bold;width: 58%;margin-top: 3%">单品备料/份：</span>
+            <el-input v-model="materialsAmount" placeholder="请输入备料量"></el-input>
+<!--          </el-form-item>-->
+        </div>
+        <div style="width: 13%;">
+          <el-form-item style="margin-left: 1%">
+            <el-select v-model="selectedUnit" placeholder="请选择单位">
+              <el-option label="粒" value="粒"></el-option>
+              <el-option label="袋" value="袋"></el-option>
+              <el-option label="克" value="克"></el-option>
+              <el-option label="公斤" value="公斤"></el-option>
+            </el-select>
+          </el-form-item >
+        </div>
+        <div style="width: 65%;display: flex;margin-left: 4%">
+          <span style="font-size: 14px;font-weight: bold;width: 12%;margin-top: 1%">辅助材料：</span>
+<!--          <el-form-item label="辅助材料：" style="width: 100%" >-->
+            <el-input v-model="auxiliaryMaterial" placeholder="请输入辅助材料"></el-input>
+<!--          </el-form-item>-->
+        </div>
+      </el-form>
+    </div>
+
+    <el-divider style="width: 80%"></el-divider>
+    <div style="width: 90%">
+      <el-row>
+        <el-col :span="24">材料邮寄或接料人信息：</el-col>
+      </el-row>
+      <el-row style="margin-top: 1%;display: flex">
+        <div style="width:16%">
+          <el-col :span="8" style="display: flex;">
+            <span style="font-size: 14px;font-weight: bold;width: 40%;margin-top: 3%">接料人：</span>
+
+            <span></span>
+            <el-input v-model="receiverName1" placeholder="姓名" ></el-input>
+          </el-col>
+        </div>
+        <div style="width: 16%">
+          <el-col :span="8" style="display: flex">
+            <span style="font-size: 14px;font-weight: bold;width: 30%;margin-top: 3%;margin-left: 7%">电话：</span>
+            <el-input v-model="receiverPhone1" placeholder="电话号码"></el-input>
+          </el-col>
+        </div>
+        <div style="width: 68%">
+          <el-col :span="8" style="display: flex">
+            <span style="font-size: 14px;font-weight: bold;width: 6%;margin-top: 6px;margin-left: 1%">地址：</span>
+
+            <el-input v-model="receiverAddress1" placeholder="地址" ></el-input>
+          </el-col>
+        </div>
+      </el-row>
+      <el-row style="margin-top: 1%;display: flex">
+        <div style="width:16%">
+          <el-col :span="8" style="display: flex;">
+            <span style="font-size: 14px;font-weight: bold;width: 40%;margin-top: 3%">接料人：</span>
+
+            <span></span>
+            <el-input v-model="receiverName1" placeholder="姓名" ></el-input>
+          </el-col>
+        </div>
+        <div style="width: 16%">
+          <el-col :span="8" style="display: flex">
+            <span style="font-size: 14px;font-weight: bold;width: 30%;margin-top: 3%;margin-left: 7%">电话：</span>
+            <el-input v-model="receiverPhone1" placeholder="电话号码"></el-input>
+          </el-col>
+        </div>
+        <div style="width: 68%">
+          <el-col :span="8" style="display: flex">
+            <span style="font-size: 14px;font-weight: bold;width: 6%;margin-top: 6px;margin-left: 1%">地址：</span>
+
+            <el-input v-model="receiverAddress1" placeholder="地址" ></el-input>
+          </el-col>
+        </div>
+      </el-row>
+    </div>
+
   </div>
 </template>
 
@@ -70,7 +113,10 @@ export default {
         { 序号: '01-01', 产品名称: '示例产品1', 产品代码: '001', 实验密度: '5000' },
         { 序号: '01-02', 产品名称: '示例产品2', 产品代码: '002', 实验密度: '5000' },
         { 序号: '01-03', 产品名称: '示例产品3', 产品代码: '003', 实验密度: '5000' },
-        { 序号: '01-04', 产品名称: '示例产品4', 产品代码: '004', 实验密度: '5000' }
+        { 序号: '01-04', 产品名称: '示例产品3', 产品代码: '003', 实验密度: '5000' },
+        { 序号: '01-05', 产品名称: '示例产品3', 产品代码: '003', 实验密度: '5000' },
+        { 序号: '01-06', 产品名称: '示例产品3', 产品代码: '003', 实验密度: '5000' },
+        { 序号: '01-07', 产品名称: '示例产品4', 产品代码: '004', 实验密度: '5000' }
       ],
       materialsAmount: '',
       selectedUnit: '',
@@ -108,4 +154,11 @@ export default {
 .details {
   margin-bottom: 20px;
 }
+.el-divider--horizontal{
+  width: 90%;
+  margin-top: 0px;
+}
+.el-col-8{
+  width: 100%;
+}
 </style>

src/views/enterprise/export_code.vue

@@ -1,49 +1,148 @@
 <template>
-  <div style="margin-top: 5%;margin-left: 5%;width: 90%;">
-    <el-table
-      :data="tableData"
-      style="width: 100%">
-      <el-table-column
-        prop="date1"
-        label="01-01"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="date2"
-        label="01-02"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="date3"
-        label="01-03">
-      </el-table-column>
-    </el-table>
-  </div>
+<div style="margin-top: 0%;margin-left: 3%;width: 94%;">
+  <table cellspacing="0" cellpadding="0" border="1">
+    <thead>
+    <tr >
+      <th style="width: 180px">01 - 01</th>
+      <th style="width: 180px">01 - 02</th>
+      <th style="width: 180px">01 - 03</th>
+      <th style="width: 180px">01 - 04</th>
+      <th style="width: 180px">01 - 05</th>
+      <th style="width: 180px">01 - 06</th>
+      <th style="width: 180px">01 - 07</th>
+      <th style="width: 180px">01 - 08</th>
+    </tr>
 
-</template>
+    </thead>
+    <tbody >
+    <tr v-for="item in tableData" :key="item.date1">
+      <td>
+        <div style="display: flex;border: 1px solid black;width: 160px;height: 80px;border-radius: 16px;margin-top: 10px;margin-left: 10px">
+          <img :src="getImageForCell(item.date1)" alt="Cell Image" style="margin-left: 16px;margin-top: 4px;width: 70px;height: 70px"/>
+          <span style="font-size: 10px;display: inline-block;margin-top: 4%;margin-left: 5px">新内容 9<br>2024-01-01<br>新农夫 88<br>新 swq123<br>1 次重复</span>
+        </div>
+      </td>
+      <td>
+        <div style="display: flex;border: 1px solid black;width: 160px;height: 80px;border-radius: 16px;margin-top: 10px;margin-left: 10px">
+          <img :src="getImageForCell(item.date1)" alt="Cell Image" style="margin-left: 16px;margin-top: 4px;width: 70px;height: 70px"/>
+          <span style="font-size: 10px;display: inline-block;margin-top: 4%;margin-left: 5px">新内容 9<br>2024-01-01<br>新农夫 88<br>新 swq123<br>1 次重复</span>
+
+        </div>
+      </td>
+      <td>
+        <div style="display: flex;border: 1px solid black;width: 160px;height: 80px;border-radius: 16px;margin-top: 10px;margin-left: 10px">
+          <img :src="getImageForCell(item.date1)" alt="Cell Image" style="margin-left: 16px;margin-top: 4px;width: 70px;height: 70px"/>
+          <span style="font-size: 10px;display: inline-block;margin-top: 4%;margin-left: 5px">新内容 9<br>2024-01-01<br>新农夫 88<br>新 swq123<br>1 次重复</span>
+
+        </div>
+      </td>
+      <td>
+        <div style="display: flex;border: 1px solid black;width: 160px;height: 80px;border-radius: 16px;margin-top: 10px;margin-left: 10px">
+          <img :src="getImageForCell(item.date1)" alt="Cell Image" style="margin-left: 16px;margin-top: 4px;width: 70px;height: 70px"/>
+          <span style="font-size: 10px;display: inline-block;margin-top: 4%;margin-left: 5px">新内容 9<br>2024-01-01<br>新农夫 88<br>新 swq123<br>1 次重复</span>
+
+        </div>
+      </td>
+      <td>
+        <div style="display: flex;border: 1px solid black;width: 160px;height: 80px;border-radius: 16px;margin-top: 10px;margin-left: 10px">
+          <img :src="getImageForCell(item.date1)" alt="Cell Image" style="margin-left: 16px;margin-top: 4px;width: 70px;height: 70px"/>
+          <span style="font-size: 10px;display: inline-block;margin-top: 4%;margin-left: 5px">新内容 9<br>2024-01-01<br>新农夫 88<br>新 swq123<br>1 次重复</span>
+
+        </div>
+      </td>
+      <td>
+        <div style="display: flex;border: 1px solid black;width: 160px;height: 80px;border-radius: 16px;margin-top: 10px;margin-left: 10px">
+          <img :src="getImageForCell(item.date1)" alt="Cell Image" style="margin-left: 16px;margin-top: 4px;width: 70px;height: 70px"/>
+          <span style="font-size: 10px;display: inline-block;margin-top: 4%;margin-left: 5px">新内容 9<br>2024-01-01<br>新农夫 88<br>新 swq123<br>1 次重复</span>
 
+        </div>
+      </td>
+      <td>
+        <div style="display: flex;border: 1px solid black;width: 160px;height: 80px;border-radius: 16px;margin-top: 10px;margin-left: 10px">
+          <img :src="getImageForCell(item.date1)" alt="Cell Image" style="margin-left: 16px;margin-top: 4px;width: 70px;height: 70px"/>
+          <span style="font-size: 10px;display: inline-block;margin-top: 4%;margin-left: 5px">新内容 9<br>2024-01-01<br>新农夫 88<br>新 swq123<br>1 次重复</span>
+
+        </div>
+      </td>
+      <td>
+        <div style="display: flex;border: 1px solid black;width: 160px;height: 80px;border-radius: 16px;margin-top: 10px;margin-left: 10px">
+          <img :src="getImageForCell(item.date1)" alt="Cell Image" style="margin-left: 16px;margin-top: 4px;width: 70px;height: 70px"/>
+          <span style="font-size: 10px;display: inline-block;margin-top: 4%;margin-left: 5px">新内容 9<br>2024-01-01<br>新农夫 88<br>新 swq123<br>1 次重复</span>
+        </div>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+  <table style="margin-top: 2%" cellspacing="0" cellpadding="0" border="1" >
+    <thead>
+    <tr>
+      <th style="width: 180px">01 - 09</th>
+      <th style="width: 180px">01 - 10</th>
+    </tr>
+
+    </thead>
+    <tbody>
+    <tr v-for="item in tableData" :key="item.date1">
+      <td>
+        <div style="display: flex;border: 1px solid black;width: 160px;height: 80px;border-radius: 16px;margin-top: 10px;margin-left: 10px">
+          <img :src="getImageForCell(item.date1)" alt="Cell Image" style="margin-left: 16px;margin-top: 4px;width: 70px;height: 70px"/>
+          <span style="font-size: 10px;display: inline-block;margin-top: 4%;margin-left: 5px">新内容 9<br>2024-01-01<br>新农夫 88<br>新 swq123<br>1 次重复</span>
+        </div>
+      </td>
+      <td>
+        <div style="display: flex;border: 1px solid black;width: 160px;height: 80px;border-radius: 16px;margin-top: 10px;margin-left: 10px">
+          <img :src="getImageForCell(item.date1)" alt="Cell Image" style="margin-left: 16px;margin-top: 4px;width: 70px;height: 70px"/>
+          <span style="font-size: 10px;display: inline-block;margin-top: 4%;margin-left: 5px">新内容 9<br>2024-01-01<br>新农夫 88<br>新 swq123<br>1 次重复</span>
+
+        </div>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+  <el-button style="margin-left: 30%">打印</el-button>
+  <el-button style="margin-left: 30%">分享</el-button>
+</div>
+</template>
 <script>
 export default {
   data() {
     return {
-      tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄'
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
-      }]
+      tableData: [
+        {
+          date1: '2024 - 01 - 01',
+          date2: '新名字 1',
+          date3: '新地址 1'
+        },
+        {
+          date1: '2016 - 05 - 04',
+          date2: '新名字 2',
+          date3: '新地址 2'
+        },
+        {
+          date1: '2016 - 05 - 03',
+          date2: '新名字 3',
+          date3: '新地址 3'
+        }
+      ]
+    };
+  },
+  methods: {
+    // 假设这里有一个本地图片路径，实际应用中可以根据内容动态确定图片路径
+    getImageForCell(value) {
+      return 'https://p0.ssl.img.360kuai.com/t016408070083e8da97.jpg';
+    },
+    getImageForCell2(value) {
+      return 'https://editor - js.888ban.com/qk - editor - static/public/images/er_wx_code.png?v = 1655815409';
     }
   }
-}
+};
 </script>
+
+<style></style>
+<!--    <div style="margin-left:40%;width: 35%">-->
+<!--      <span style="margin-left: -30%">二维码样式：-->
+<!--        <img src="https://cdn.docsmall.com/assets/img/jpg-before.59a11fe.jpg" style="width: 20px;height: 20px" />-->
+<!--      </span>-->
+<!--      <el-radio v-model="radio" label="1" style="margin-left: 40%">显示产品名称</el-radio>-->
+<!--      <el-button style="margin-left: 2%">保存</el-button>-->
+<!--    </div>-->