订单档期查询

src/views/his/storeOrder/order1.vue

@@ -107,6 +107,15 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
+      <el-form-item label="档期标签" prop="tag">
+        <el-input
+          v-model="queryParams.tag"
+          placeholder="请输入档期标签"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
       <el-form-item label="支付方式" prop="payType">
          <el-select  multiple  v-model="payTypeArr" placeholder="请选择支付方式" clearable filterable size="small" >
          <el-option
@@ -524,6 +533,23 @@
                 <dict-tag :options="PayOptions" :value="scope.row.payType"/>
           </template>
         </el-table-column>
+        <el-table-column label="标签" align="center" prop="tags" width="300px">
+
+        <template slot-scope="scope">
+          <div class="tag-container">
+            <div class="tag-list">
+              <el-tag
+                v-for="name in scope.row.tags"
+                :key="name"
+                type="success"
+                size="small"
+              >
+                {{ name }}
+              </el-tag>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
           <el-table-column label="下单时间" align="center" prop="createTime" width="180" />
         <el-table-column label="支付时间" align="center" prop="payTime" width="180" />
         <el-table-column label="发货时间" align="center" prop="deliverySendTime" width="180" />
@@ -2436,6 +2462,24 @@ export default {
 };
 </script>
 <style scoped>
+.tag-container {
+  display: flex;
+  flex-wrap: wrap; /* 超出宽度时自动换行 */
+  gap: 8px; /* 设置标签之间的间距 */
+}
+.tag-container {
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 1px;
+  border: 1px solid #ebeef5;
+  border-radius: 1px;
+  background-color: #fafafa;
+}
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
 .tag-input-order-search {
   padding: 20px;
   background: #fff;