fix stock page bug: cannot change device type

xiuosiot-frontend/src/views/terminal/stock/index.vue

@@ -8,33 +8,56 @@
       <div class="header">
         <div class="type_btn">
           <el-button-group>
-            <el-button @click="handleClick(1,'矽灵通RISCV')">矽灵通RISCV</el-button>
+            <el-button
-            <el-button @click="handleClick(2,'矽灵通ARM')">矽灵通ARM</el-button>
+              @click="handleClick(1, '矽灵通RISCV')"
-            <el-button @click="handleClick(3,'矽望通')">矽望通</el-button>
+            >矽灵通RISCV</el-button>
-            <el-button @click="handleClick(4,'矽慧通')">矽慧通</el-button>
+            <el-button
-            <el-button @click="handleClick(5,'矽达通RISCV')">矽达通RISCV</el-button>
+              @click="handleClick(2, '矽灵通ARM')"
+            >矽灵通ARM</el-button>
+            <el-button @click="handleClick(3, '矽望通')">矽望通</el-button>
+            <el-button @click="handleClick(4, '矽慧通')">矽慧通</el-button>
+            <el-button
+              @click="handleClick(5, '矽达通RISCV')"
+            >矽达通RISCV</el-button>
           </el-button-group>
           <el-button-group>
-            <el-button @click="handleClick(6,'矽达通ARM')">矽达通ARM</el-button>
+            <el-button
-            <el-button @click="handleClick(7,'AIIT-RISCV')">AIIT-RISCV</el-button>
+              @click="handleClick(6, '矽达通ARM')"
-            <el-button @click="handleClick(8,'AIIT-ARM')">AIIT-ARM</el-button>
+            >矽达通ARM</el-button>
-            <el-button @click="handleClick(9,'教学型RISCV')">教学型RISCV</el-button>
+            <el-button
-            <el-button @click="handleClick(10,'教学型ARM')">教学型ARM</el-button>
+              @click="handleClick(7, 'AIIT-RISCV')"
+            >AIIT-RISCV</el-button>
+            <el-button @click="handleClick(8, 'AIIT-ARM')">AIIT-ARM</el-button>
+            <el-button
+              @click="handleClick(9, '教学型RISCV')"
+            >教学型RISCV</el-button>
+            <el-button
+              @click="handleClick(10, '教学型ARM')"
+            >教学型ARM</el-button>
           </el-button-group>
         </div>
         <h1 class="title">库存管理</h1>
         <span class="date">{{ date }}</span>
-        <el-input v-model="searchNo" placeholder="请输入终端编号" suffix-icon="el-icon-search" @change="handleSearch" />
+        <el-input
+          v-model="searchNo"
+          placeholder="请输入终端编号"
+          suffix-icon="el-icon-search"
+          @change="handleSearch"
+        />
       </div>
     </el-row>
     <el-row>
-      <el-button class="add_btn" icon="el-icon-plus" @click="add">新增库存</el-button>
+      <el-button
+        class="add_btn"
+        icon="el-icon-plus"
+        @click="add"
+      >新增库存</el-button>
     </el-row>
     <div class="table_container">
       <div class="title">
         <div class="name">{{ terminalTypeDesc }}</div>
         <div class="num">
-          <span>{{ '总数：' + totalnum }}</span>
+          <span>{{ "总数：" + totalnum }}</span>
         </div>
       </div>
       <ul>
@@ -46,15 +69,23 @@
           <span class="column5">备注</span>
           <span class="column6" />
         </li>
-        <li v-for="(item,index) in list" :key="index">
+        <li v-for="(item, index) in list" :key="index">
           <span class="column1">{{ item.fzDeviceNo | contentForamtter }}</span>
-          <span class="column2">{{ item.fzDeviceStatus | contentForamtter }}</span>
+          <span class="column2">{{
-          <span class="column3">{{ item.fzDeviceUser | contentForamtter }}</span>
+            item.fzDeviceStatus | contentForamtter
+          }}</span>
+          <span class="column3">{{
+            item.fzDeviceUser | contentForamtter
+          }}</span>
           <span class="column4">{{ item.fzOuttime | contentForamtter }}</span>
           <span class="column5">{{ item.fzRemark | contentForamtter }}</span>
           <span class="column6 operation">
             <i class="el-icon-edit" @click="edit(item)" />
-            <i class="el-icon-delete" style="margin-left: 15px;" @click="remove(item.fzDeviceNo)" />
+            <i
+              class="el-icon-delete"
+              style="margin-left: 15px"
+              @click="remove(item.fzDeviceNo)"
+            />
           </span>
         </li>
       </ul>
@@ -70,7 +101,32 @@
               width="40px"
             >设备名称
           </p>
-          <p class="ip_val">{{ form.fzDeviceType }}</p>
+          <el-dropdown @command="handleTypeChoose">
+            <span class="el-dropdown-link ip_val">
+              {{ form.fzDeviceType
+              }}<i class="el-icon-arrow-down el-icon--right" />
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                command="矽灵通RISCV"
+              >矽灵通RISCV</el-dropdown-item>
+              <el-dropdown-item command="矽灵通ARM">矽灵通ARM</el-dropdown-item>
+              <el-dropdown-item command="矽望通">矽望通</el-dropdown-item>
+              <el-dropdown-item command="矽慧通">矽慧通</el-dropdown-item>
+              <el-dropdown-item
+                command="矽达通RISCV"
+              >矽达通RISCV</el-dropdown-item>
+              <el-dropdown-item command="矽达通ARM">矽达通ARM</el-dropdown-item>
+              <el-dropdown-item
+                command="AIIT-RISCV"
+              >AIIT-RISCV</el-dropdown-item>
+              <el-dropdown-item command="AIIT-ARM">AIIT-ARM</el-dropdown-item>
+              <el-dropdown-item
+                command="教学型RISCV"
+              >教学型RISCV</el-dropdown-item>
+              <el-dropdown-item command="教学型ARM">教学型ARM</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
           <div class="remove_icon" @click="close">X</div>
         </div>
         <div class="dialog_content">
@@ -136,7 +192,14 @@
 </template>
 
 <script>
-import { getList, getListByType, getListByNo, add, update, remove } from '@/api/terminal/stock'
+import {
+  getList,
+  getListByType,
+  getListByNo,
+  add,
+  update,
+  remove
+} from '@/api/terminal/stock'
 
 export default {
   filters: {
@@ -149,7 +212,6 @@ export default {
       visible: false,
       date: '',
       list: [],
-      current: {},
       operationType: 1, // 1-新增，2-编辑
       form: {},
       totalnum: 0,
@@ -211,6 +273,9 @@ export default {
         }
       })
     },
+    handleTypeChoose(type) {
+      this.form.fzDeviceType = type
+    },
     showDetail(index) {
       this.add = false
       this.form = this.formulaList[index]
@@ -223,7 +288,7 @@ export default {
       this.visible = true
     },
     add() {
-      this.form = {}
+      this.form = { fzDeviceType: '矽灵通RISCV' }
       this.operationType = 1 // 新增
       this.visible = true
     },
@@ -232,7 +297,12 @@ export default {
     },
     async save() {
       const data = { ...this.form }
-      const res = this.operationType === 1 ? await add(data) : this.operationType === 2 ? await update(data) : ''
+      const res =
+        this.operationType === 1
+          ? await add(data)
+          : this.operationType === 2
+            ? await update(data)
+            : ''
       if (res.code === '200000') {
         this.$message.success('保存成功')
       }
@@ -373,7 +443,7 @@ export default {
   .operation {
     color: #20be0b;
     background: none;
-    i{
+    i {
       cursor: pointer;
     }
   }
@@ -423,6 +493,7 @@ export default {
       }
       .ip_val {
         font-size: 26px;
+        color: #fff;
       }
       .remove_icon {
         position: absolute;
@@ -494,24 +565,24 @@ export default {
       font-weight: bold;
       text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
     }
-    .cancel_btn{
+    .cancel_btn {
-        border-color: #20BE0B;
+      border-color: #20be0b;
-        color: #20BE0B;
+      color: #20be0b;
-        &:hover{
+      &:hover {
-            background-color: rgba(32,190,11,0.1);
+        background-color: rgba(32, 190, 11, 0.1);
-        }
+      }
     }
-    .save_btn{
+    .save_btn {
-        border-color: #20BE0B;
+      border-color: #20be0b;
-        background-color: #20BE0B;
+      background-color: #20be0b;
-        border-radius: 2px;
+      border-radius: 2px;
-        &:hover{
+      &:hover {
-            background-color: #1a9f28;
+        background-color: #1a9f28;
-        }
+      }
     }
   }
 }
-::v-deep .el-input > .el-input__inner{
+::v-deep .el-input > .el-input__inner {
   border: none;
 }
 </style>