src/views/foodModifier/components/ModifierDetail.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="createPost-container">
-    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="right" label-width="90px" class="form-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="right" label-width="130px" class="form-container">
       <div class="createPost-main-container">
+        <el-checkbox @change="checkboxChange" :disabled="isEdit" v-model="isDefaultModifier" style="margin: 0 0 10px 100px">默认规格</el-checkbox>
         <el-form-item label="规格名称：" style="margin-bottom: 40px;width: 60%" prop="name">
-          <el-input v-model="postForm.name" placeholder="请输入名称" @blur="updateUnit" />
+          <el-input :disabled="isDefaultModifier" v-model="postForm.name" placeholder="请输入名称" @blur="updateUnit" />
         </el-form-item>
-        <el-form-item label="数值：" style="margin-bottom: 40px;width: 60%" prop="quantity">
+        <el-form-item v-show="!isDefaultModifier" label="数值：" style="margin-bottom: 40px;width: 60%" prop="quantity">
           <el-input v-model="postForm.quantity" placeholder="请输入数值" />
         </el-form-item>
-        <el-form-item label="单位名称：" style="margin-bottom: 40px;width: 60%" prop="unit">
+        <el-form-item v-show="!isDefaultModifier"  label="单位名称：" style="margin-bottom: 40px;width: 60%" prop="unit">
           <el-autocomplete
             style="width: 100%"
             v-model="postForm.unit"
@@ -36,7 +37,7 @@
         <el-form-item label="卡尺每格刻度：" prop="stepScale" style="margin-bottom: 40px;width: 60%">
           <el-input v-model="postForm.stepScale" placeholder="请输入卡尺每格刻度" />
         </el-form-item>
-        <el-form-item label="图片列表：" prop="images" style="margin-bottom: 30px;width: 60%">
+        <el-form-item v-show="!isDefaultModifier"  label="图片列表：" prop="images" style="margin-bottom: 30px;width: 60%">
           <dropzone
             id="modifierImages"
             :default-img="postForm.images"
@@ -68,11 +69,13 @@ export default {
   components: { Dropzone },
   data() {
     return {
+      defaultModifierName: '-',
       postForm: {},
       rules: {},
       loading: false,
       foodId: '',
-      modifierId: ''
+      modifierId: '',
+      isDefaultModifier: false
     }
   },
   created() {
@@ -86,6 +89,9 @@ export default {
     fetchData() {
       getFoodModifier(this.foodId, this.modifierId).then(res => {
         this.postForm = res.data
+        if (this.postForm.name === this.defaultModifierName) {
+          this.isDefaultModifier = true
+        }
       })
     },
     removeFile(file) {
@@ -142,6 +148,10 @@ export default {
       if (!this.postForm.inInitUnit && unitName) {
         this.$set(this.postForm, 'inInitUnit', unitName)
       }
+    },
+    checkboxChange(value) {
+      const name = value ? this.defaultModifierName : ''
+      this.$set(this.postForm, 'name', name)
     }
   }
 }

src/views/nutrient/index.vue

@@ -77,26 +77,21 @@
           <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" fixed="right" width="480">
+      <el-table-column label="操作" align="center" fixed="right" width="90">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="handleCreateOrUpdate('update', row)">
-            更新
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 0)">
-            上移
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 1)">
-            下移
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 2)">
-            置顶
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 3)">
-            置底
-          </el-button>
-          <el-button size="mini" type="danger" @click="handleDelete(row)">
-            删除
-          </el-button>
+          <el-dropdown @command="handleCommand">
+            <el-button size="small" @click.stop="{}" type="primary">
+              操作<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item :command="{row: row, command: 'update'}">更新</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveUp'}">上移</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveDown'}">下移</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveTop'}">置顶</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveBottom'}">置顶</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'delete'}">删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -182,7 +177,7 @@ export default {
       listQuery: {
         query: '',
         pageNum: 1,
-        pageSize: 20
+        pageSize: 50
       },
       textMap: {
         update: '更新',
@@ -269,6 +264,28 @@ export default {
         this.$message.error(res.data.message)
         this.fetchData()
       })
+    },
+    handleCommand(data) {
+      switch (data.command) {
+        case 'update':
+          this.handleCreateOrUpdate('update', data.row)
+          break
+        case 'moveUp':
+          this.updateSort(data.row, 0)
+          break
+        case 'moveDown':
+          this.updateSort(data.row, 1)
+          break
+        case 'moveTop':
+          this.updateSort(data.row, 2)
+          break
+        case 'moveBottom':
+          this.updateSort(data.row, 3)
+          break
+        case 'delete':
+          this.handleDelete(data.row)
+          break
+      }
     }
   }
 }

src/views/nutrientTemplate/index.vue

@@ -57,29 +57,22 @@
           <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" fixed="right" width="560">
+      <el-table-column label="操作" align="center" fixed="right" width="90">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="handleCreateOrUpdate('update', row)">
-            更新
-          </el-button>
-          <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="manageNutrients(row)">
-            管理营养素
-          </el-button>
-          <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="updateSort(row, 0)">
-            上移
-          </el-button>
-          <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="updateSort(row, 1)">
-            下移
-          </el-button>
-          <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="updateSort(row, 2)">
-            置顶
-          </el-button>
-          <el-button type="primary" size="mini" :disabled="!canUpdate(row.userId)" @click="updateSort(row, 3)">
-            置底
-          </el-button>
-          <el-button size="mini" type="danger" :disabled="!canUpdate(row.userId)" @click="handleDelete(row)">
-            删除
-          </el-button>
+          <el-dropdown @command="handleCommand">
+            <el-button size="small" @click.stop="{}" type="primary">
+              操作<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'update'}">更新</el-dropdown-item>
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'manage'}">管理营养素</el-dropdown-item>
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'moveUp'}">上移</el-dropdown-item>
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'moveDown'}">下移</el-dropdown-item>
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'moveTop'}">置顶</el-dropdown-item>
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'moveBottom'}">置顶</el-dropdown-item>
+              <el-dropdown-item :disabled="!canUpdate(row.userId)" :command="{row: row, command: 'delete'}">删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -197,6 +190,31 @@ export default {
     },
     manageNutrients(row) {
       this.$router.push({ path: `nutrient-template/${row.id}/detail` })
+    },
+    handleCommand(data) {
+      switch (data.command) {
+        case 'update':
+          this.handleCreateOrUpdate('update', data.row)
+          break
+        case 'manage':
+          this.manageNutrients(data.row)
+          break
+        case 'moveUp':
+          this.updateSort(data.row, 0)
+          break
+        case 'moveDown':
+          this.updateSort(data.row, 1)
+          break
+        case 'moveTop':
+          this.updateSort(data.row, 2)
+          break
+        case 'moveBottom':
+          this.updateSort(data.row, 3)
+          break
+        case 'delete':
+          this.handleDelete(data.row)
+          break
+      }
     }
   }
 }

src/views/unit/index.vue

@@ -77,23 +77,21 @@
           <span>{{ row.stepScale }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="400">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="90">
         <template slot-scope="{row}">
-          <el-button type="primary" size="mini" @click="handleCreateOrUpdate('UPDATE', row)">
-            更新
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 0)">
-            上移
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 1)">
-            下移
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 2)">
-            置顶
-          </el-button>
-          <el-button type="primary" size="mini" @click="updateSort(row, 3)">
-            置底
-          </el-button>
+          <el-dropdown @command="handleCommand">
+            <el-button size="small" @click.stop="{}" type="primary">
+              操作<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item :command="{row: row, command: 'update'}">更新</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveUp'}">上移</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveDown'}">下移</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveTop'}">置顶</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'moveBottom'}">置顶</el-dropdown-item>
+              <el-dropdown-item :command="{row: row, command: 'delete'}">删除</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -230,6 +228,25 @@ export default {
         this.$message.error(res.data.message)
         this.dialogFormVisible = false
       })
+    },
+    handleCommand(data) {
+      switch (data.command) {
+        case 'update':
+          this.handleCreateOrUpdate('update', data.row)
+          break
+        case 'moveUp':
+          this.updateSort(data.row, 0)
+          break
+        case 'moveDown':
+          this.updateSort(data.row, 1)
+          break
+        case 'moveTop':
+          this.updateSort(data.row, 2)
+          break
+        case 'moveBottom':
+          this.updateSort(data.row, 3)
+          break
+      }
     }
   }
 }