供应商发布文章，百科列表筛选区域排版调整

src/main/resources/static/css/supplier-center/article/article-list.css

@@ -2,21 +2,21 @@
 @media screen and (min-width: 768px){
 .top-row{width:968px;padding:12px 0 12px 236px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
 .top-row .crumbs{width:auto;padding:0;margin:0}
-.hot-tip{font-size:12px;color:#E15616;margin-bottom: 16px;}
-.form-section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
-.form-section .form-item{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-bottom:18px}
-.form-section .form-item .form-label{margin-right:8px;font-size:14px;color:#627386}
-.form-section .form-item .form-control{outline:none;width:210px;height:36px;padding:8px 12px;background:#FFFFFF;border:1px solid #B8BFCA;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}
-.form-section .form-item .form-control::-webkit-input-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control::-moz-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control:-ms-input-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control::-ms-input-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control::placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-select{color:#627386}
-.form-section .form-item .form-button{height:36px;padding:0 30px;margin-left:16px;font-size:14px;line-height:36px;border-radius:2px;cursor:pointer}
-.form-section .buttons{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
-.form-section .form-item .form-button.search{color:#FFFFFF;background:#E15616}
-.form-section .form-item .form-button.add{background:#FFE6DC;border:1px solid #E15616;color:#E15616}
+.hot-tip{font-size:12px;color:#E15616;margin-bottom: 8px;}
+/*筛选区域*/
+.filter-container{ padding-bottom: 16px;}
+.filter-container .filter-control{ display: inline-block ; margin-top: 16px; margin-right: 2px;}
+.filter-container .filter-control .label { display: inline-block; line-height: 36px; }
+.filter-container .filter-control .control { display: inline-block ;}
+.filter-container .filter-control .el-input .el-input__inner{ height: 36px; line-height: 34px; }
+.filter-container .filter-control .el-input { width: 168px; }
+.filter-container .filter-control .el-select .el-input{ width: 128px; }
+.filter-container .filter-control .el-select .el-input__inner{ width: 128px; }
+.filter-container .filter-control .form-button{height:36px;padding:0 30px;margin-left:8px;font-size:14px;line-height:36px;border-radius:2px;cursor:pointer}
+.filter-container .filter-control .buttons{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
+.filter-container .filter-control .form-button.search{color:#FFFFFF;background:#E15616}
+.filter-container .filter-control .form-button.add{background:#FFE6DC;border:1px solid #E15616;color:#E15616}
+/*筛选区域END*/
 .navLayout{min-height:500px}
 .article-list{}
 .article-list .row{width:100%;padding:18px 20px 0;margin-bottom:16px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;-webkit-box-shadow:0px 3px 6px rgba(0,0,0,0.07);box-shadow:0px 3px 6px rgba(0,0,0,0.07)}

src/main/resources/static/css/supplier-center/encyclopedia/article-list.css

@@ -2,21 +2,23 @@
 @media screen and (min-width: 768px){
 .top-row{width:968px;padding:12px 0 12px 236px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
 .top-row .crumbs{width:auto;padding:0;margin:0}
-.hot-tip{font-size:12px;color:#E15616;margin-bottom: 16px}
-.form-section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
-.form-section .form-item{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-bottom:18px}
-.form-section .form-item .form-label{margin-right:8px;font-size:14px;color:#627386}
-.form-section .form-item .form-control{outline:none;width:210px;height:36px;padding:8px 12px;background:#FFFFFF;border:1px solid #B8BFCA;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}
-.form-section .form-item .form-control::-webkit-input-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control::-moz-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control:-ms-input-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control::-ms-input-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control::placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-select{color:#627386}
-.form-section .form-item .form-button{height:36px;padding:0 30px;margin-left:16px;font-size:14px;line-height:36px;border-radius:2px;cursor:pointer}
-.form-section .buttons{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
-.form-section .form-item .form-button.search{color:#FFFFFF;background:#E15616}
-.form-section .form-item .form-button.add{background:#FFE6DC;border:1px solid #E15616;color:#E15616}
+.hot-tip{font-size:12px;color:#E15616;margin-bottom: 8px}
+/*筛选区域*/
+.filter-container{ padding-bottom: 16px;}
+.filter-container .filter-control{ display: inline-block ; margin-top: 16px; margin-right: 2px;}
+.filter-container .filter-control .label { display: inline-block; line-height: 36px; }
+.filter-container .filter-control .control { display: inline-block ;}
+.filter-container .filter-control .el-input .el-input__inner{ height: 36px; line-height: 34px; }
+.filter-container .filter-control .el-input { width: 210px; }
+.filter-container .filter-control .el-select.mini-width .el-input{ width: 128px; }
+.filter-container .filter-control .el-select.mini-width .el-input__inner{ width: 128px; }
+.filter-container .filter-control .el-select .el-select__caret{ line-height: 36px }
+
+.filter-container .filter-control .form-button{height:36px;padding:0 30px;margin-left:8px;font-size:14px;line-height:36px;border-radius:2px;cursor:pointer}
+.filter-container .filter-control .buttons{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
+.filter-container .filter-control .form-button.search{color:#FFFFFF;background:#E15616}
+.filter-container .filter-control .form-button.add{background:#FFE6DC;border:1px solid #E15616;color:#E15616}
+/*筛选区域END*/
 .navLayout{min-height:500px}
 .article-list{}
 .article-list .row{width:100%;padding:18px 20px 0;margin-bottom:16px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;-webkit-box-shadow:0px 3px 6px rgba(0,0,0,0.07);box-shadow:0px 3px 6px rgba(0,0,0,0.07)}

src/main/resources/templates/supplier-center/article/article-list.html

@@ -4,9 +4,11 @@
 <head>
     <title>采美365网-文章管理-文章列表</title>
     <template th:replace="components/head-link"></template>
+    <!--element ui 样式表-->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
+    <link th:href="@{/lib/element-ui-min.css}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
-    <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
-    <!--    <link th:href="@{/css/supplier-center/article/table.css(v=${version})}" rel="stylesheet" type="text/css">-->
+<!--    <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">-->
     <link th:href="@{/css/supplier-center/article/article-list.css(v=${version})}" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
@@ -33,38 +35,63 @@
                 <!--筛选-->
                 <div class="row">
                     <div class="hot-tip">温馨提示：发布采美文章有利于曝光您的店铺商品，提高成交量（发布并且审核通过后，可在信息中心搜索您的文章）</div>
-                    <div class="form-section">
-                        <div class="form-item">
-                            <label for="articleId" class="form-label">文章ID:</label>
-                            <input id="articleId" class="form-control" v-model="listQuery.articleId" type="text" placeholder="请输入文章ID"/>
+                    <div class="filter-container">
+                        <!--文章ID-->
+                        <div class="filter-control">
+                            <span class="label">文章ID：</span>
+                            <el-input class="control" v-model="listQuery.articleId" placeholder="请输入文章ID" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="articleTitle" class="form-label">文章标题:</label>
-                            <input id="articleTitle" class="form-control" v-model="listQuery.title" type="text" placeholder="请输入文章标题"/>
+                        <!--文章标题-->
+                        <div class="filter-control">
+                            <span class="label">文章标题：</span>
+                            <el-input class="control" v-model="listQuery.title" placeholder="请输入文章标题" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="articleAuthor" class="form-label">发布人:</label>
-                            <input id="articleAuthor" class="form-control" v-model="listQuery.publisher" type="text" placeholder="输入发布人"/>
+                        <!--发布人-->
+                        <div class="filter-control">
+                            <span class="label">发布人：</span>
+                            <el-input class="control" v-model="listQuery.publisher" placeholder="请输入文章发布人" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="articleCate" class="form-label">文章分类:</label>
-                            <select id="articleCate" class="form-control form-select" v-model="listQuery.typeId" @change="getArticleList">
-                                <option value="">请选择</option>
+                        <!--文章分类-->
+                        <div class="filter-control">
+                            <span class="label">文章分类：</span>
+                            <el-select v-model="listQuery.typeId" @change="getArticleList" clearable>
+                                <el-option label="全部" value=""></el-option>
                                 <template v-for="(typeInfo, index) in articleTypeList">
-                                    <option :value="typeInfo.typeId" :key="index">{{typeInfo.typeName}}</option>
+                                    <el-option :key="index" :label="typeInfo.typeName" :value="typeInfo.typeId"></el-option>
                                 </template>
-                            </select>
+                            </el-select>
                         </div>
-                        <div class="form-item">
-                            <label for="articleStatus" class="form-label">审核状态:</label>
-                            <select id="articleStatus" class="form-control form-select" v-model="listQuery.auditStatus"  @change="handleSearchList">
-                                <option value="">全部</option>
-                                <option value="1">待审核</option>
-                                <option value="2">审核通过</option>
-                                <option value="3">审核未通过</option>
-                            </select>
+                        <!--审核状态-->
+                        <div class="filter-control">
+                            <span class="label">审核状态：</span>
+                            <el-select v-model="listQuery.auditStatus" @change="getArticleList" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待审核" :value="1"></el-option>
+                                <el-option label="审核通过" :value="2"></el-option>
+                                <el-option label="审核未通过" :value="3"></el-option>
+                            </el-select>
                         </div>
-                        <div class="form-item buttons">
+                        <!--上线状态-->
+                        <div class="filter-control">
+                            <span class="label">上线状态：</span>
+                            <el-select v-model="listQuery.typeId" @change="getArticleList" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待上线" :value="1"></el-option>
+                                <el-option label="已上线" :value="2"></el-option>
+                                <el-option label="已下线" :value="3"></el-option>
+                            </el-select>
+                        </div>
+                        <!--状态-->
+                        <div class="filter-control">
+                            <span class="label">状态：</span>
+                            <el-select v-model="listQuery.typeId" @change="getArticleList" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="已发布" :value="1"></el-option>
+                                <el-option label="保存草稿箱" :value="2"></el-option>
+                            </el-select>
+                        </div>
+                        <!--筛选按钮-->
+                        <div class="filter-control">
                             <button class="form-button search" type="button" @click="handleSearchList">搜索</button>
                             <button class="form-button add" type="button" @click="handleAddArticle">添加</button>
                         </div>
@@ -157,10 +184,9 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui.min.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript"
-        th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript"
-        th:src="@{/js/supplier-center/article/article-list.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/article/article-list.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/supplier-center/encyclopedia/instrument-list.html

@@ -5,7 +5,9 @@
     <title>采美365网-采美百科-仪器</title>
     <template th:replace="components/head-link"></template>
     <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
-    <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
+    <!--element ui 样式表-->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
+    <link th:href="@{/lib/element-ui-min.css}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/supplier-center/encyclopedia/article-list.css(v=${version})}" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
@@ -32,38 +34,61 @@
                 <!--筛选-->
                 <div class="row">
                     <div class="hot-tip">温馨提示：发布采美百科有利于曝光您的店铺商品，更有利于客户对产品与仪器有更深的认识度，提高成交率。（注意：发布并且审核通过后，可在采美百科搜索您的仪器）</div>
-                    <div class="form-section">
-                        <div class="form-item">
-                            <label for="productId" class="form-label">仪器ID:</label>
-                            <input id="productId" class="form-control" v-model="listQuery.productId" type="text" placeholder="请输入仪器ID"/>
+                    <div class="filter-container">
+                        <!--仪器ID-->
+                        <div class="filter-control">
+                            <span class="label">仪器ID：</span>
+                            <el-input class="control" v-model="listQuery.productId" placeholder="请输入仪器ID" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="productTitle" class="form-label">仪器名称:</label>
-                            <input id="productTitle" class="form-control" v-model="listQuery.name" type="text" placeholder="请输入仪器名称"/>
+                        <!--仪器名称-->
+                        <div class="filter-control">
+                            <span class="label">仪器名称：</span>
+                            <el-input class="control" v-model="listQuery.name" placeholder="请输入仪器名称" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="productCate" class="form-label">仪器分类:</label>
-                            <select id="productCate" class="form-control form-select" v-model="listQuery.typeId" @change="getArticleList">
-                                <option value="">请选择</option>
+                        <!--仪器分类-->
+                        <div class="filter-control">
+                            <span class="label">仪器分类：</span>
+                            <el-select v-model="listQuery.typeId" @change="getArticleList" clearable>
+                                <el-option label="全部" value=""></el-option>
                                 <template v-for="(typeInfo, index) in productTypeList">
-                                    <option :value="typeInfo.typeId" :key="index">{{typeInfo.typeName}}</option>
+                                    <el-option :key="index" :label="typeInfo.typeName" :value="typeInfo.typeId"></el-option>
                                 </template>
-                            </select>
+                            </el-select>
                         </div>
-                        <div class="form-item">
-                            <label for="productStatus" class="form-label">审核状态:</label>
-                            <select id="productStatus" class="form-control form-select" v-model="listQuery.auditStatus"  @change="handleSearchList">
-                                <option value="">全部</option>
-                                <option value="1">待审核</option>
-                                <option value="2">审核通过</option>
-                                <option value="3">审核未通过</option>
-                            </select>
+                        <!--审核状态-->
+                        <div class="filter-control">
+                            <span class="label">审核状态：</span>
+                            <el-select v-model="listQuery.auditStatus" @change="getArticleList" class="mini-width" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待审核" :value="1"></el-option>
+                                <el-option label="审核通过" :value="2"></el-option>
+                                <el-option label="审核未通过" :value="3"></el-option>
+                            </el-select>
                         </div>
-                        <div class="form-item buttons">
+                        <!--上线状态-->
+                        <div class="filter-control">
+                            <span class="label">上线状态：</span>
+                            <el-select v-model="listQuery.typeId" @change="getArticleList" class="mini-width" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待上线" :value="1"></el-option>
+                                <el-option label="已上线" :value="2"></el-option>
+                                <el-option label="已下线" :value="3"></el-option>
+                            </el-select>
+                        </div>
+                        <!--状态-->
+                        <div class="filter-control">
+                            <span class="label">状态：</span>
+                            <el-select v-model="listQuery.typeId" @change="getArticleList" class="mini-width" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="已发布" :value="1"></el-option>
+                                <el-option label="保存草稿箱" :value="2"></el-option>
+                            </el-select>
+                        </div>
+                        <!--筛选按钮-->
+                        <div class="filter-control">
                             <button class="form-button search" type="button" @click="handleSearchList">搜索</button>
                             <button class="form-button add" type="button" @click="handleAddArticle">添加</button>
                         </div>
-                        <div class="form-item"></div>
                     </div>
                 </div>
                 <!--列表表格-->
@@ -75,6 +100,7 @@
                             <th>仪器分类</th>
                             <th>阅读量</th>
                             <th>审核状态</th>
+                            <th>上线状态</th>
                             <th>发布时间</th>
                             <th>添加时间</th>
                             <th>状态</th>
@@ -94,6 +120,11 @@
                                     <span class="state danger" v-else>审核失败</span>
                                     <span class="reason" v-if="productInfo.auditStatus === 3" :title="'审核失败：' + productInfo.failReason">?</span>
                                 </td>
+                                <td>
+                                    <span class="state default" v-if="true">待上线</span>
+                                    <span class="state success" v-if="false">已上线</span>
+                                    <span class="state danger" v-if="false">已下线</span>
+                                </td>
                                 <td class="time">
                                     <div class="time">{{ productInfo.publishTime | formatDate }}</div>
                                 </td>
@@ -140,11 +171,9 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
-
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui.min.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript"
-        th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript"
-        th:src="@{/js/supplier-center/encyclopedia/instrument-list.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/instrument-list.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/supplier-center/encyclopedia/product-list.html

@@ -4,8 +4,10 @@
 <head>
     <title>采美365网-采美百科-产品</title>
     <template th:replace="components/head-link"></template>
+    <!--element ui 样式表-->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
+    <link th:href="@{/lib/element-ui-min.css}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
-    <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/supplier-center/encyclopedia/article-list.css(v=${version})}" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
@@ -32,38 +34,61 @@
                 <!--筛选-->
                 <div class="row">
                     <div class="hot-tip">温馨提示：发布采美百科有利于曝光您的店铺商品，更有利于客户对产品与仪器有更深的认识度，提高成交率。（注意：发布并且审核通过后，可在采美百科搜索您的产品）</div>
-                    <div class="form-section">
-                        <div class="form-item">
-                            <label for="productId" class="form-label">产品ID:</label>
-                            <input id="productId" class="form-control" v-model="listQuery.productId" type="text" placeholder="请输入产品ID"/>
+                    <div class="filter-container">
+                        <!--产品ID-->
+                        <div class="filter-control">
+                            <span class="label">产品ID：</span>
+                            <el-input class="control" v-model="listQuery.productId" placeholder="请输入产品ID" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="productTitle" class="form-label">产品名称:</label>
-                            <input id="productTitle" class="form-control" v-model="listQuery.name" type="text" placeholder="请输入产品名称"/>
+                        <!--产品名称-->
+                        <div class="filter-control">
+                            <span class="label">产品名称：</span>
+                            <el-input class="control" v-model="listQuery.name" placeholder="请输入产品名称" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="productCate" class="form-label">产品分类:</label>
-                            <select id="productCate" class="form-control form-select" v-model="listQuery.typeId" @change="getArticleList">
-                                <option value="">请选择</option>
+                        <!--产品分类-->
+                        <div class="filter-control">
+                            <span class="label">产品分类：</span>
+                            <el-select v-model="listQuery.typeId" @change="getArticleList" clearable>
+                                <el-option label="全部" value=""></el-option>
                                 <template v-for="(typeInfo, index) in productTypeList">
-                                    <option :value="typeInfo.typeId" :key="index">{{typeInfo.typeName}}</option>
+                                    <el-option :key="index" :label="typeInfo.typeName" :value="typeInfo.typeId"></el-option>
                                 </template>
-                            </select>
+                            </el-select>
                         </div>
-                        <div class="form-item">
-                            <label for="productStatus" class="form-label">审核状态:</label>
-                            <select id="productStatus" class="form-control form-select" v-model="listQuery.auditStatus"  @change="handleSearchList">
-                                <option value="">全部</option>
-                                <option value="1">待审核</option>
-                                <option value="2">审核通过</option>
-                                <option value="3">审核未通过</option>
-                            </select>
+                        <!--审核状态-->
+                        <div class="filter-control">
+                            <span class="label">审核状态：</span>
+                            <el-select v-model="listQuery.auditStatus" @change="getArticleList" class="mini-width" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待审核" :value="1"></el-option>
+                                <el-option label="审核通过" :value="2"></el-option>
+                                <el-option label="审核未通过" :value="3"></el-option>
+                            </el-select>
                         </div>
-                        <div class="form-item buttons">
+                        <!--上线状态-->
+                        <div class="filter-control">
+                            <span class="label">上线状态：</span>
+                            <el-select v-model="listQuery.typeId"  @change="getArticleList" class="mini-width" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待上线" :value="1"></el-option>
+                                <el-option label="已上线" :value="2"></el-option>
+                                <el-option label="已下线" :value="3"></el-option>
+                            </el-select>
+                        </div>
+                        <!--状态-->
+                        <div class="filter-control">
+                            <span class="label">状态：</span>
+                            <el-select v-model="listQuery.typeId"  @change="getArticleList" class="mini-width" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="已发布" :value="1"></el-option>
+                                <el-option label="保存草稿箱" :value="2"></el-option>
+                            </el-select>
+                        </div>
+                        <!--筛选按钮-->
+                        <div class="filter-control">
                             <button class="form-button search" type="button" @click="handleSearchList">搜索</button>
                             <button class="form-button add" type="button" @click="handleAddArticle">添加</button>
                         </div>
-                        <div class="form-item"></div>
                     </div>
                 </div>
                 <!--列表表格-->
@@ -75,6 +100,7 @@
                             <th>产品分类</th>
                             <th>阅读量</th>
                             <th>审核状态</th>
+                            <th>上线状态</th>
                             <th>发布时间</th>
                             <th>添加时间</th>
                             <th>状态</th>
@@ -94,6 +120,11 @@
                                     <span class="state danger" v-else>审核失败</span>
                                     <span class="reason" v-if="productInfo.auditStatus === 3" :title="'审核失败：' + productInfo.failReason">?</span>
                                 </td>
+                                <td>
+                                    <span class="state default" v-if="true">待上线</span>
+                                    <span class="state success" v-if="false">已上线</span>
+                                    <span class="state danger" v-if="false">已下线</span>
+                                </td>
                                 <td class="time">
                                     <div class="time">{{ productInfo.publishTime | formatDate }}</div>
                                 </td>
@@ -140,11 +171,9 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
-
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui.min.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript"
-        th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript"
-        th:src="@{/js/supplier-center/encyclopedia/product-list.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/product-list.js(v=${version})}"></script>
 </body>
 </html>