商品化专利修改

src/views/product/components/commodity/commodity.vue

@@ -9,41 +9,55 @@
             <mySearch style="width: 500px" :SearchFields="searchFiled" @search="search" :searchValue="searchOption">
             </mySearch>
           </div>
-          <div style="margin-right: 10px;">
-            <el-popover placement="bottom" title="" width="250" trigger="click">
-              <el-main class="patent-fast-edit-popover">
-                <div class="btn" @click="handleSelectNumber(-1)">取消选择</div>
-                <div class="btn" @click="handleSelectNumber(0)">本页选择</div>
-                <div class="btn" @click="handleSelectNumber(1)">全部选择</div>
-                <el-divider></el-divider>
-                <div class="select-number">
-                  <span>从</span>
-                  <el-input size="mini" v-model="queryParams.startNumber" @change="change1"></el-input>
-                  <span>到</span>
-                  <el-input size="mini" v-model="queryParams.endNumber" @change="change2"></el-input>
-                  <el-button type="text" size="" @click="handleSelectNumber(2)">确定</el-button>
-                </div>
-              </el-main>
-              <el-button type="primary" size="small" class="margin-right_10" slot="reference">
-                选择专利<i class="el-icon-arrow-down el-icon--right"></i>
-              </el-button>
-            </el-popover>
-            <el-dropdown split-button type="primary" size="small" @click="handleCommand('0')"
-              @command="handleCommand($event)">
-              <p>删除</p>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item>
-                  <el-dropdown placement="left-start" @command="handleCommand($event)">
-                    <span>专利导入</span>
-                    <el-dropdown-menu slot="dropdown">
-                      <el-dropdown-item command="1">专利号导入</el-dropdown-item>
-                      <el-dropdown-item command="2">Excel导入</el-dropdown-item>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                </el-dropdown-item>
-                <el-dropdown-item command="3">显示栏位管理</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
+          <div style="margin-right: 10px;display: flex;">
+            <div>
+              <el-button-group style=" display: flex; justify-content: flex-start;margin-right: 10px;">
+                <el-button size="small" :type="componentType === 'visual' ? 'primary' : ''"
+                  @click="onChange2('visual')">可视化</el-button>
+                <el-button :type="componentType === 'commodityTable' ? 'primary' : ''" @click="onChange2('commodityTable')"
+                  size="small">列表</el-button>
+                <el-button :type="componentType === 'Card' ? 'primary' : ''" @click="onChange2('Card')"
+                  size="small">卡片</el-button>
+              </el-button-group>
+            </div>
+            <div>
+              <el-popover placement="bottom" title="" width="250" trigger="click">
+                <el-main class="patent-fast-edit-popover">
+                  <div class="btn" @click="handleSelectNumber(-1)">取消选择</div>
+                  <div class="btn" @click="handleSelectNumber(0)">本页选择</div>
+                  <div class="btn" @click="handleSelectNumber(1)">全部选择</div>
+                  <el-divider></el-divider>
+                  <div class="select-number">
+                    <span>从</span>
+                    <el-input size="mini" v-model="queryParams.startNumber" @change="change1"></el-input>
+                    <span>到</span>
+                    <el-input size="mini" v-model="queryParams.endNumber" @change="change2"></el-input>
+                    <el-button type="text" size="" @click="handleSelectNumber(2)">确定</el-button>
+                  </div>
+                </el-main>
+                <el-button type="primary" size="small" class="margin-right_10" slot="reference">
+                  选择专利<i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+              </el-popover>
+            </div>
+            <div>
+              <el-dropdown split-button type="primary" size="small" @click="handleCommand('0')"
+                @command="handleCommand($event)">
+                <p>删除</p>
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item>
+                    <el-dropdown placement="left-start" @command="handleCommand($event)">
+                      <span>专利导入</span>
+                      <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item command="1">专利号导入</el-dropdown-item>
+                        <el-dropdown-item command="2">Excel导入</el-dropdown-item>
+                      </el-dropdown-menu>
+                    </el-dropdown>
+                  </el-dropdown-item>
+                  <el-dropdown-item command="3">显示栏位管理</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
           </div>
         </div>
       </el-header>
@@ -128,6 +142,9 @@ export default {
 
   },
   methods: {
+    onChange2(val) {
+      this.componentType=val
+    },
     // 选择专利事件
     handleSelectNumber(val) { },
     // 起始数字框