优化页面

src/views/food/index.vue

@@ -1,31 +1,30 @@
 <template>
   <div v-loading="uploadLoading" class="app-container">
     <div class="filter-container">
-      <el-row style="margin-bottom: 5px">
+      <el-row>
         <el-input
           v-model="listQuery.query"
           placeholder="请输入检索词"
-          style="width: 40%;"
+          style="width: 200px;"
           class="filter-item"
           @keyup.enter.native="fetchData()"
         />
-        <el-select v-if="isUsda" v-model="selectType" style="width: 160px;margin-left: 10px;" class="filter-item">
+        <el-select v-if="isUsda" v-model="selectType" style="width: 160px;" class="filter-item">
           <el-option v-for="item in usdaTypes" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
-        <el-select v-if="foodSourceIsAll" v-model="selectType" clearable style="width: 160px;margin-left: 10px;" class="filter-item">
+        <el-select v-if="foodSourceIsAll" v-model="selectType" clearable style="width: 160px;" class="filter-item">
           <el-option v-for="item in allTypes" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
-        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="fetchData">
+        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="fetchData">
           检索
         </el-button>
         <el-select v-model="listQuery.orderBy" style="width: 160px;margin-left: 10px;" class="filter-item" @change="fetchData">
           <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
         </el-select>
-      </el-row>
-      <el-row>
+
         <el-button
           class="filter-item"
-          style="margin: 0 10px 20px 0; float: right;"
+          style="float: right;"
           type="success"
           icon="el-icon-circle-plus-outline"
           @click="handleCreate"
@@ -34,7 +33,7 @@
         </el-button>
         <el-button
           class="filter-item"
-          style="margin: 0 10px 20px 0; float: right;"
+          style="margin-right: 10px; float: right;"
           type="primary"
           @click="handleImport"
         >
@@ -122,7 +121,7 @@
       <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" width="90">
         <template slot-scope="{row}">
           <el-dropdown @command="handleCommand">
-            <el-button size="small" type="primary" @click.stop="{}">
+            <el-button type="primary" @click.stop="{}">
               操作<i class="el-icon-arrow-down el-icon--right" />
             </el-button>
             <el-dropdown-menu slot="dropdown">

src/views/recipe/food.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      食物：
       <el-select
         ref="foodSelect"
         v-model="params.foodId"
+        class="filter-item"
         filterable
         remote
         reserve-keyword
-        style="width: 200px;margin-left: 10px;"
-        placeholder="请输入营养素关键词"
+        style="width: 200px;"
+        placeholder="食物"
         :remote-method="queryFoods"
         :loading="loading"
         @change="changeUnits"
@@ -21,16 +21,18 @@
           :value="item.id"
         />
       </el-select>
-      数量：
       <el-input
         v-model="params.quantity"
+        placeholder="数量"
         style="width: 80px;"
         class="filter-item"
       />
+
       <el-select
         v-model="params.unit"
+        class="filter-item"
         filterable
-        style="width: 200px;margin-left: 10px;"
+        style="width: 200px;"
       >
         <el-option
           v-for="item in units"
@@ -39,9 +41,8 @@
           :value="item"
         />
       </el-select>
-      主材/辅材:
-      <el-radio v-model="params.foodType" :label="0">主材</el-radio>
-      <el-radio v-model="params.foodType" :label="1">辅材</el-radio>
+      <el-radio v-model="params.foodType" class="filter-item" :label="0" style="margin-left: 30px;">主材</el-radio>
+      <el-radio v-model="params.foodType" class="filter-item" :label="1">辅材</el-radio>
       <el-button
         class="filter-item"
         style="margin-left: 10px;"
@@ -54,12 +55,12 @@
 
     <el-table
       :key="0"
+      ref="dragTable"
       v-loading="listLoading"
       :data="list"
       border
       fit
       highlight-current-row
-      style="width: 60%;margin-top: 10px"
     >
       <el-table-column type="index" label="序号" align="center" width="60px" />
       <el-table-column label="食物名称" align="center">
@@ -94,7 +95,12 @@
           <span v-else>{{ row.foodType | foodTypeFilter }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="320">
+      <el-table-column align="center" label="Drag" width="80" class-name="drag-handler-col">
+        <template slot-scope="{}">
+          <svg-icon class="drag-handler" icon-class="drag" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
         <template slot-scope="{row}">
           <template v-if="row.edit">
             <el-button
@@ -116,12 +122,12 @@
             <el-button size="mini" type="primary" @click="handleEdit(row)">
               更新
             </el-button>
-            <el-button size="mini" type="primary" @click="updateSort(row, 0)">
+            <!-- <el-button size="mini" type="primary" @click="updateSort(row, 0)">
               上移
             </el-button>
             <el-button size="mini" type="primary" @click="updateSort(row, 1)">
               下移
-            </el-button>
+            </el-button> -->
             <el-button size="mini" type="danger" @click="removeFood(row)">
               删除
             </el-button>
@@ -135,6 +141,7 @@
 <script>
 import { getList, getFoodAllUnits } from '@/api/food'
 import { getRecipeFoods, addFood, removeRecipeFood, updateRecipeFoodSort, updateFood } from '@/api/recipe'
+import Sortable from 'sortablejs'
 
 const foodTypeMapping = { 0: '主材', 1: '辅材' }
 export default {
@@ -161,6 +168,7 @@ export default {
     this.fetchData()
   },
   mounted() {
+    this.sortTable()
     this.$refs.foodSelect.focus()
   },
   methods: {
@@ -232,6 +240,19 @@ export default {
         this.fetchData()
         this.$message.error(res.data.message)
       })
+    },
+    sortTable() {
+      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+      Sortable.create(el, {
+        animation: 150,
+        ghostClass: 'sortable-ghost',
+        handle: '.drag-handler-col', // handle's class
+        setData: function(dataTransfer) {
+
+        },
+        onEnd: evt => {
+        }
+      })
     }
   }
 }

src/views/recipe/step.vue

@@ -90,8 +90,7 @@ export default {
       textMap: { 'create': '新建', 'edit': '更新' },
       dialogStatus: '',
       dialogFormVisible: false,
-      rules: {},
-      sortable: ''
+      rules: {}
     }
   },
   created() {
@@ -99,18 +98,7 @@ export default {
     this.fetchData()
   },
   mounted() {
-    const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
-    this.sortable = Sortable.create(el, {
-      animation: 150,
-      ghostClass: 'sortable-ghost',
-      handle: '.drag-handler-col', // handle's class
-      // ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
-      setData: function(dataTransfer) {
-
-      },
-      onEnd: evt => {
-      }
-    })
+    this.sortTable()
   },
   methods: {
     fetchData() {
@@ -169,6 +157,19 @@ export default {
         this.fetchData()
         this.$message.error(res.data.message)
       })
+    },
+    sortTable() {
+      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
+      Sortable.create(el, {
+        animation: 150,
+        ghostClass: 'sortable-ghost',
+        handle: '.drag-handler-col', // handle's class
+        setData: function(dataTransfer) {
+
+        },
+        onEnd: evt => {
+        }
+      })
     }
   }
 }