完成单位页面

src/api/unit.js

@@ -1,9 +1,45 @@
 import request from '@/utils/request'
 
 // 获取列表
-export function getList() {
+export function getList(params) {
   return request({
     url: '/api/units',
+    method: 'get',
+    params
+  })
+}
+
+// 上移下移
+export function updateSortOrder(id, data) {
+  return request({
+    url: `/api/units/${id}/sort`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取所有基础单位
+export function getBaseUnits() {
+  return request({
+    url: '/api/units/base-units',
     method: 'get'
   })
 }
+
+// 创建
+export function createUnit(data) {
+  return request({
+    url: `/api/units`,
+    method: 'post',
+    data
+  })
+}
+
+// 更新
+export function updateUnit(id, data) {
+  return request({
+    url: `/api/units/${id}`,
+    method: 'post',
+    data
+  })
+}

src/views/unit/index.vue

@@ -1,5 +1,24 @@
 <template>
   <div class="app-container">
+    <el-input
+      v-model="listQuery.query"
+      placeholder="请输入检索词"
+      style="width: 60%;"
+      class="filter-item"
+      @keyup.enter.native="fetchData()"
+    />
+    <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="fetchData">
+      检索
+    </el-button>
+    <el-button
+      class="filter-item"
+      style="margin: 0 10px 20px 0; float: right;"
+      type="success"
+      icon="el-icon-circle-plus-outline"
+      @click="handleCreate">
+      新建
+    </el-button>
+
     <el-table
       :data="list"
       border
@@ -7,7 +26,7 @@
       highlight-current-row
       style="width: 100%;"
     >
-      <el-table-column label="ID" align="center" width="150">
+      <el-table-column label="ID" align="center" width="70">
         <template slot-scope="{row}">
           <span>{{ row.id }}</span>
         </template>
@@ -22,26 +41,207 @@
           <span>{{ row.enName }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="缩写" align="center">
+      <el-table-column label="编码" align="center" width="70">
+        <template slot-scope="{row}">
+          <span>{{ row.code }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="是否为基础单位" align="center" width="50">
+        <template slot-scope="{row}">
+          <span>{{ row.isBaseUnit | booleanFilter }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="基础单位ID" align="center" width="70">
+        <template slot-scope="{row}">
+          <span>{{ row.baseUnit }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="转换关系(1 * unit = ratio * baseUnit)" align="center" width="100">
+        <template slot-scope="{row}">
+          <span>{{ row.ratio }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="最小刻度" align="center" width="100">
+        <template slot-scope="{row}">
+          <span>{{ row.minScale }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="最大刻度" align="center" width="100">
         <template slot-scope="{row}">
-          <span>{{ row.abbreviation }}</span>
+          <span>{{ row.maxScale }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="卡尺每格刻度" align="center" width="100">
+        <template slot-scope="{row}">
+          <span>{{ row.stepScale }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="{row,$index}">
+          <el-button type="primary" size="mini" @click="handleUpdate(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>
         </template>
       </el-table-column>
     </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
+
+    <el-dialog :title="textMapping[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :rules="rules" :model="params" label-position="left" label-width="150px" style="width: 400px; margin-left:50px;">
+        <el-form-item label="ID" prop="id">
+          <el-input v-model="params.id" placeholder="请输入ID, 为空系统自动创建" :disabled="dialogStatus==='UPDATE'" />
+        </el-form-item>
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="params.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="英文名称" prop="enName">
+          <el-input v-model="params.enName" placeholder="请输入英文名称" />
+        </el-form-item>
+        <el-form-item label="编码" prop="code">
+          <el-input v-model="params.code" placeholder="请输入编码" />
+        </el-form-item>
+        <el-form-item label="是否为基础单位" prop="code">
+          <el-radio v-model="params.isBaseUnit" :label="true">是</el-radio>
+          <el-radio v-model="params.isBaseUnit" :label="false">否</el-radio>
+        </el-form-item>
+        <el-form-item label="基础单位" prop="code" v-if="!params.isBaseUnit">
+          <el-select v-model="params.baseUnit">
+            <el-option v-for="item in baseUnits" :key="item.id" :value="item.id" :label="item.name" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="转换关系(1 * unit = ratio * baseUnit)" prop="ratio" v-if="!params.isBaseUnit">
+          <el-input v-model="params.ratio" placeholder="请输入转换关系" />
+        </el-form-item>
+        <el-form-item label="最小刻度" prop="minScale">
+          <el-input v-model="params.minScale" placeholder="请输入最小刻度" />
+        </el-form-item>
+        <el-form-item label="最大刻度" prop="maxScale">
+          <el-input v-model="params.maxScale" placeholder="请输入最大刻度" />
+        </el-form-item>
+        <el-form-item label="卡尺每格刻度" prop="stepScale">
+          <el-input v-model="params.stepScale" placeholder="请输入卡尺每格刻度" />
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="dialogStatus==='CREATE'?createData():updateData()">
+          提交
+        </el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import store from '@/store'
+import { getList, updateSortOrder, getBaseUnits, createUnit, updateUnit } from '@/api/unit'
+import Pagination from '@/components/Pagination'
 
 export default {
   name: 'UnitList',
+  components: { Pagination },
   created() {
-    this.list = store.getters.units
+    this.fetchData()
+  },
+  filters: {
+    booleanFilter(value) {
+      return value ? '是' : '否'
+    }
   },
   data() {
     return {
-      list: []
+      list: [],
+      listLoading: false,
+      listQuery: {
+        query: '',
+        pageNum: 1,
+        pageSize: 50
+      },
+      total: 0,
+      textMapping: { 'CREATE': '创建', 'UPDATE': '更新' },
+      dialogStatus: '',
+      dialogFormVisible: false,
+      rules: {
+        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
+      },
+      params: {},
+      baseUnits: []
+    }
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true
+      getList(this.listQuery).then(res => {
+        this.list = res.data.list
+        this.total = res.data.count
+        this.listLoading = false
+      }).catch(res => {
+        this.$message("获取数据失败")
+      })
+    },
+    handleCreate() {
+      if (this.baseUnits <= 0){
+        this.fetchBaseUnits()
+      }
+      this.params = {}
+      this.dialogStatus = 'CREATE'
+      this.dialogFormVisible = true
+    },
+    handleUpdate(row) {
+      if (this.baseUnits <= 0){
+        this.fetchBaseUnits()
+      }
+      this.params = row
+      this.dialogStatus = 'UPDATE'
+      this.dialogFormVisible = true
+    },
+    updateSort(row, type) {
+      updateSortOrder(row.id, { type }).then(res => {
+        this.fetchData()
+        this.$message.success("提交成功")
+      }).catch(res => {
+        this.fetchData()
+        this.$message.error(res.data.message)
+      })
+    },
+    fetchBaseUnits() {
+      getBaseUnits().then(res => {
+        this.baseUnits = res.data.list
+      })
+    },
+    createData() {
+      createUnit(this.params).then(res => {
+        this.fetchData()
+        this.$message.success("提交成功")
+        this.dialogFormVisible = false
+      }).catch(res => {
+        this.fetchData()
+        this.$message.error(res.data.message)
+        this.dialogFormVisible = false
+      })
+    },
+    updateData() {
+      updateUnit(this.params.id, this.params).then(res => {
+        this.fetchData()
+        this.$message.success("提交成功")
+        this.dialogFormVisible = false
+      }).catch(res => {
+        this.fetchData()
+        this.$message.error(res.data.message)
+        this.dialogFormVisible = false
+      })
     }
   }
 }