frontent/src/views/unit/index.vue

<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="handleCreateOrUpdate('CREATE')"
    >
      新建
    </el-button>

    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="自定义ID" align="center" fixed width="100">
        <template slot-scope="{row}">
          <span>{{ row.id2 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center" fixed width="200">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="英文名称" align="center" width="200">
        <template slot-scope="{row}">
          <span>{{ row.enName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="编码" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否为基础单位" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.isBaseUnit | booleanFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="基础单位" align="center" width="200">
        <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.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" fixed="right" width="90">
        <template slot-scope="{row}">
          <el-dropdown @command="handleCommand">
            <el-button size="small" type="primary" @click.stop="{}">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </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-menu>
          </el-dropdown>
        </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="id2">
          <el-input v-model="params.id2" placeholder="请输入自定义ID" />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="params.name" placeholder="请输入名称" :disabled="dialogStatus === 'UPDATE'" />
        </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" :disabled="dialogStatus === 'UPDATE'">是</el-radio>
          <el-radio v-model="params.isBaseUnit" :label="false" :disabled="dialogStatus === 'UPDATE'">否</el-radio>
        </el-form-item>
        <el-form-item v-if="!params.isBaseUnit" label="基础单位" prop="code">
          <el-select v-model="params.baseUnitId" :disabled="dialogStatus === 'UPDATE'">
            <el-option v-for="item in baseUnits" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="!params.isBaseUnit" label="转换关系(1 * unit = ratio * baseUnit)" prop="ratio">
          <el-input v-model="params.ratio" placeholder="请输入转换关系" :disabled="dialogStatus === 'UPDATE'" />
        </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="createOrUpdateData">
          提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, updateSortOrder, getBaseUnits, createUnit, updateUnit } from '@/api/unit'
import Pagination from '@/components/Pagination'

export default {
  name: 'UnitList',
  components: { Pagination },
  filters: {
    booleanFilter(value) {
      return value ? '是' : '否'
    }
  },
  data() {
    return {
      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: []
    }
  },
  created() {
    this.fetchData()
  },
  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('获取数据失败')
        this.listLoading = false
      })
    },
    handleCreateOrUpdate(dialogStatus, row) {
      if (this.baseUnits <= 0) {
        this.fetchBaseUnits()
      }
      this.dialogStatus = dialogStatus
      this.params = dialogStatus === 'CREATE' ? {} : Object.assign(row, {})
      this.dialogFormVisible = true
    },
    updateSort(row, type) {
      updateSortOrder(row.id, { type }).then(res => {
        this.fetchData()
        this.$notify.success('提交成功')
      }).catch(res => {
        this.fetchData()
        this.$message.error(res.data.message)
      })
    },
    fetchBaseUnits() {
      getBaseUnits().then(res => {
        this.baseUnits = res.data.list
      })
    },
    createOrUpdateData() {
      const resultPromise = this.dialogStatus === 'CREATE' ? createUnit(this.params) : updateUnit(this.params.id,
        this.params)
      resultPromise.then(res => {
        this.fetchData()
        this.$notify.success('提交成功')
        this.dialogFormVisible = false
      }).catch(res => {
        this.fetchData()
        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
      }
    }
  }
}
</script>

<style scoped>

</style>