vue二次開發vue-element-admin框架項目簡單流程

小白先去參考這個鏈接

vue-element-admin
vue-element-admin-i18n

二次開發

• 確定你是選用i18n的分支還是直接使用原項目來開發，因爲一開始我選的原項目開發，後期改成i18n的時候拿文件對比器一點點改的，改的地方還挺多
• 先閱讀裏面的README.zh-CN.md這個文檔，如果能照着這個文檔來做的就照着這個來就行
• 簡單說一下我二次開發的時候修改的文件信息(參考就行)

// {項目根路徑}/vue.config.js

const name = defaultSettings.title || '你自定義的title' // page title
// 該vue項目npm啓動時或nginx靜態部署時的訪問端口
const port = 9900 // dev port

// {項目根路徑}/src/settings.js
module.exports = {
	title: 'xxx系統',
	/*這裏我把right-panel給打開了，這裏隨意改*/
	showSettings: true,
	......
}

二次開發寫的功能模塊(vue組件)：

// {項目根路徑}/src/views/xxxFloder/xxx.vue

<template>
  <div class="app-container">
    <div class="filter-container" style="float: right">
      <el-row class="filter-item">
        <el-col :span="24">
          <el-autocomplete
            v-model="stateCompanyName"
            class="inline-input"
            :fetch-suggestions="querySearchCompanyName"
            :placeholder="$t('orgManage.inputCompanyName')"
            :trigger-on-focus="false"
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <div>{{ item.companyName }}</div>
            </template>
          </el-autocomplete>
        </el-col>
      </el-row>
      <el-row class="filter-item">
        <el-col :span="24">
          <el-autocomplete
            v-model="stateDepartmentName"
            class="inline-input"
            :fetch-suggestions="querySearchDepartmentName"
            :placeholder="$t('orgManage.inputDepartmentName')"
            :trigger-on-focus="false"
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <div>{{ item.departmentName }}</div>
            </template>
          </el-autocomplete>
        </el-col>
      </el-row>
      <el-row class="filter-item">
        <el-col :span="24">
          <el-autocomplete
            v-model="stateRoomNum"
            class="inline-input"
            :fetch-suggestions="querySearchRoomNum"
            :placeholder="$t('xxx.inputRoomNum')"
            :trigger-on-focus="false"
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <div>{{ item.roomNum }}</div>
            </template>
          </el-autocomplete>
        </el-col>
      </el-row>
      <el-row class="filter-item">
        <el-col :span="24">
          <el-autocomplete
            v-model="stateBedsNum"
            class="inline-input"
            :fetch-suggestions="querySearchBedsNum"
            :placeholder="$t('xxx.inputBedsNum')"
            :trigger-on-focus="false"
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <div>{{ item.bedsNum }}</div>
            </template>
          </el-autocomplete>
        </el-col>
      </el-row>
      <el-row class="filter-item">
        <el-col :span="24">
          <el-autocomplete
            v-model="stateBedsStatus"
            class="inline-input"
            :fetch-suggestions="querySearchBedsStatus"
            :placeholder="$t('xxx.inputBedsStatus')"
            :trigger-on-focus="false"
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <div>{{ item.bedsStatus }}</div>
            </template>
          </el-autocomplete>
        </el-col>
      </el-row>
      <!--<el-input v-model="listQuery.bedsNum" placeholder="牀位號" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />-->
      <!--<el-input v-model="listQuery.roomNum" placeholder="房間號" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />-->
      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">
        <!--查詢-->
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        <!--添加-->
        {{ $t('table.add') }}
      </el-button>
      <el-button v-if="showDownload" v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        <!--導出-->
        {{ $t('table.export') }}
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column v-if="showID" label="ID" align="center" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type">{{ row.bedsId }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('xxx.bedsNum')" prop="bedsNum" sortable="custom" align="center" width="100" @mouseleave="roomNumLeave()">
        <template slot-scope="scope">
          <span>{{ scope.row.bedsNum }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('xxx.roomNum')" align="center" min-width="160px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">{{ row.roomNum }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('orgManage.companyName2')" align="center" min-width="160px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">{{ row.companyName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('orgManage.departmentName')" align="center" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">{{ row.departmentName }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('xxx.bedsStatus')" align="center" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">{{ row.bedsStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('xxx.property')" align="center" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">{{ row.property }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            <!--編輯-->
            {{ $t('table.edit') }}
          </el-button>
          <el-button v-if="showSaveStatus" size="mini" type="success" @click="handleModifyStatus(row,'保存')">
            <!--保存-->
            {{ $t('table.save') }}
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row)">
            <!--刪除-->
            {{ $t('table.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item :label="$t('xxx.bedsNum')" prop="bedsNum">
          <el-input v-model="temp.bedsNum" />
        </el-form-item>
        <el-form-item :label="$t('xxx.roomNum')" prop="roomNum" placeholder="請填寫房間號(數字形式)">
          <el-input v-model="temp.roomNum" />
        </el-form-item>
        <el-form-item v-if="showCompanyNum" label="單位編號" prop="companyNum">
          <el-input v-model="temp.companyNum" />
        </el-form-item>
        <el-form-item :label="$t('orgManage.companyName2')" label-width="80px" style="margin-left: -10px" prop="companyName">
          <el-select v-model="temp.companyName" class="filter-item" placeholder="請選擇" @change="companyChange">
            <el-option v-for="item in company_list" :key="item.companyName" :label="item.companyName" :value="item.companyName" />
          </el-select>
          <!--<el-input v-model="temp.companyName" />-->
        </el-form-item>
        <el-form-item v-if="showDepartmentNum" label="科室編號" prop="departmentNum">
          <el-input v-model="temp.departmentNum" />
        </el-form-item>
        <el-form-item :label="$t('orgManage.departmentName')" prop="departmentName">
          <el-select v-model="temp.departmentName" class="filter-item" placeholder="請選擇" @change="departmentChange">
            <el-option v-for="item in department_list" :key="item.departmentName" :label="item.departmentName" :value="item.departmentName" />
          </el-select>
          <!--<el-input v-model="temp.departmentName" />-->
        </el-form-item>
        <el-form-item :label="$t('xxx.bedsStatus')" prop="bedsStatus">
          <el-select v-model="temp.bedsStatus" class="filter-item" placeholder="請選擇">
            <el-option v-for="item in status_list" :key="item.bedsStatus" :label="item.bedsStatus" :value="item.bedsStatus" />
          </el-select>
          <!--<el-input v-model="temp.bedsStatus" />-->
        </el-form-item>
        <el-form-item :label="$t('xxx.property')" prop="property">
          <el-select v-model="temp.property" class="filter-item" placeholder="請選擇">
            <el-option v-for="item in property_list" :key="item.property" :label="item.property" :value="item.property" />
          </el-select>
          <!--<el-input v-model="temp.property" />-->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          <!--取消-->
          {{ $t('table.cancel') }}
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          <!--提交-->
          {{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { fetchComapnyNameAll, fetchDepartmentNameUnique, fetchDepartmentNameList } from '@/api/organization-request'
// fetchMaxBedsNum
import { fetchXxxList, fetchXxxByCondition, checkNewXxxNum, fetchBedsStatusAll, fetchBedsPropertyAll, fetchBedsNumAll, insertXxxOne, updateXxxOne, deleteXxxOne } from '@/api/ward-request'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import i18n from '@/lang'
import { isInteger, isBedsRules } from '@/utils/validate'
import store from '@/store'

export default {
  name: 'XxxManage',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        保存: 'success',
        刪除: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      restaurants: [],
      restaurants_department_name_unique: [],
      stateCompanyName: '',
      stateDepartmentName: '',
      stateRoomNum: '',
      stateBedsNum: '',
      stateBedsStatus: '',
      tableKey: 0,
      list: null,
      company_list: null,
      department_list: null,
      department_name_list_unique: null,
      status_list: null,
      property_list: null,
      ward_beds_list: null,
      total: 0,
      listLoading: true,
      showDownload: false,
      showSaveStatus: false,
      showCompanyNum: false,
      showDepartmentNum: false,
      showID: false,
      listQuery: {
        page: 1,
        limit: 20,
        bedsNum: undefined,
        roomNum: undefined,
        companyName: undefined,
        departmentNum: undefined,
        departmentName: undefined,
        bedsStatus: undefined,
        property: undefined,
        sort: '+bedsNum'
      },
      company_listQuery: {
        page: 1,
        limit: 20,
        companyNum: undefined,
        companyName: undefined,
        sort: '+companyNum'
      },
      department_listQuery: {
        page: 1,
        limit: 20,
        departmentNum: undefined,
        departmentName: undefined,
        sort: '+departmentNum'
      },
      status_listQuery: {
        page: 1,
        limit: 20,
        bedsCode: undefined,
        bedsStatus: undefined,
        sort: '+bedsCode'
      },
      property_listQuery: {
        page: 1,
        limit: 20,
        bedsCode: undefined,
        property: undefined,
        sort: '+bedsCode'
      },
      splice_department_name_listQuery: {
        page: 1,
        limit: 20,
        companyNum: undefined,
        companyName: undefined,
        sort: '+companyNum'
      },
      ward_beds_listQuery: {
        page: 1,
        limit: 20,
        roomNum: undefined,
        bedsNum: undefined,
        sort: '+bedsNum'
      },
      sortOptions: [{ label: '牀位號(由小到大)', key: '+bedsNum' }, { label: '牀位號(由大到小)', key: '-bedsNum' }],
      statusOptions: ['保存', '刪除'],
      temp: {
        bedsId: undefined,
        bedsNum: '',
        roomNum: '',
        companyNum: '',
        companyName: '',
        departmentNum: '',
        departmentName: '',
        bedsStatus: '',
        property: '',
        status: '保存'
      },
      temp2: null,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: i18n.t('table.edit'),
        create: i18n.t('table.add')
      },
      rules: {
        bedsNum: [{ required: true, message: i18n.t('xxx.bedsNumIsRequired'), trigger: 'blur' }, { validator: isBedsRules, trigger: 'blur' }],
        roomNum: [{ required: true, message: i18n.t('xxx.roomNumIsRequired'), trigger: 'blur' }, { validator: isInteger, trigger: 'blur' }],
        companyName: [{ required: true, message: i18n.t('orgManage.inputCompanyName'), trigger: 'blur' }],
        departmentName: [{ required: true, message: i18n.t('orgManage.inputDepartmentName'), trigger: 'blur' }],
        bedsStatus: [{ required: true, message: i18n.t('xxx.bedsStatusIsRequired'), trigger: 'blur' }],
        property: [{ required: true, message: i18n.t('xxx.propertyIsRequired'), trigger: 'blur' }]
      },
      downloadLoading: false
    }
  },
  created() {
    // this.getList()
  },
  async mounted() {
    await this.getList()
  },
  async activated() {
    if (!store.getters.xxxManageCacheFlag) {
      await this.getList()
      store.dispatch('globalSpace/changeXxxManageCacheFlag', true)
    }
  },
  methods: {
    querySearchDepartmentName(queryString, cb) {
      var restaurants = this.restaurants_department_name_unique
      var results = queryString ? restaurants.filter(this.createFilterDepartmentName(queryString)) : restaurants
      // 調用 callback 返回建議列表的數據
      if (store.getters.isDebugFlag) {
        debugger
      }
      cb(results)
    },
    createFilterDepartmentName(queryString) {
      return (restaurant) => {
        if (store.getters.isDebugFlag) {
          debugger
        }
        restaurant['value'] = restaurant.departmentName
        return (restaurant.departmentName.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
      }
    },
    querySearchCompanyName(queryString, cb) {
      var restaurants = this.company_list
      var results = queryString ? restaurants.filter(this.createFilterCompanyName(queryString)) : restaurants
      // 調用 callback 返回建議列表的數據
      if (store.getters.isDebugFlag) {
        debugger
      }
      cb(results)
    },
    createFilterCompanyName(queryString) {
      return (restaurant) => {
        if (store.getters.isDebugFlag) {
          debugger
        }
        restaurant['value'] = restaurant.companyName
        return (restaurant.companyName.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
      }
    },
    querySearchRoomNum(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilterRoomNum(queryString)) : restaurants
      // 調用 callback 返回建議列表的數據
      if (store.getters.isDebugFlag) {
        debugger
      }
      cb(results)
    },
    createFilterRoomNum(queryString) {
      return (restaurant) => {
        if (store.getters.isDebugFlag) {
          debugger
        }
        restaurant['value'] = restaurant.roomNum
        return (restaurant.roomNum.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
      }
    },
    querySearchBedsNum(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilterBedsNum(queryString)) : restaurants
      // 調用 callback 返回建議列表的數據
      if (store.getters.isDebugFlag) {
        debugger
      }
      cb(results)
    },
    createFilterBedsNum(queryString) {
      return (restaurant) => {
        if (store.getters.isDebugFlag) {
          debugger
        }
        restaurant['value'] = restaurant.bedsNum + ''
        return ((restaurant.bedsNum + '').toLowerCase().indexOf(queryString.toLowerCase()) > -1)
      }
    },
    querySearchBedsStatus(queryString, cb) {
      var restaurants = this.status_list
      var results = queryString ? restaurants.filter(this.createFilterBedsStatus(queryString)) : restaurants
      // 調用 callback 返回建議列表的數據
      if (store.getters.isDebugFlag) {
        debugger
      }
      cb(results)
    },
    createFilterBedsStatus(queryString) {
      return (restaurant) => {
        if (store.getters.isDebugFlag) {
          debugger
        }
        restaurant['value'] = restaurant.bedsStatus
        return (restaurant.bedsStatus.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
      }
    },
    handleSelect(item) {
      if (store.getters.isDebugFlag) {
        console.log(item)
      }
    },
    async getList() {
      this.temp2 = null
      this.listLoading = true
      await fetchXxxList(this.listQuery).then(response => {
        this.list = response.data
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 0.5 * 1000)
      })
      await fetchComapnyNameAll(this.company_listQuery).then(response => {
        this.company_list = response.data
      })
      await fetchDepartmentNameUnique(this.department_listQuery).then(response => {
        if (store.getters.isDebugFlag) {
          debugger
        }
        this.department_name_list_unique = response.data
      })
      await fetchBedsStatusAll(this.status_listQuery).then(response => {
        this.status_list = response.data
      })
      await fetchBedsPropertyAll(this.property_listQuery).then(response => {
        this.property_list = response.data
      })
      await fetchBedsNumAll(this.ward_beds_listQuery).then(response => {
        // 先不去重
        const obj = {}
        this.ward_beds_list = response.data.reduce(function(item, next) {
          obj[next.roomNum] ? '' : obj[next.roomNum] = true && item.push(next)
          return item
        }, [])
        this.total = response.data.length
      })
      this.restaurants = this.ward_beds_list
      this.restaurants_department_name_unique = this.department_name_list_unique
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSearch() {
      if (store.getters.isDebugFlag) {
        console.log('stateCompanyName: ' + this.stateCompanyName)
        console.log('stateDepartmentName: ' + this.stateDepartmentName)
        console.log('stateRoomNum: ' + this.stateRoomNum)
        console.log('stateBedsNum: ' + this.stateBedsNum)
        console.log('stateBedsStatus: ' + this.stateBedsStatus)
      }
      if (this.stateCompanyName === '' && this.stateDepartmentName === '' && this.stateRoomNum === '' && this.stateBedsNum === '' && this.stateBedsStatus === '') {
        this.getList()
      } else {
        fetchXxxByCondition({ stateCompanyName: this.stateCompanyName, stateDepartmentName: this.stateDepartmentName, stateRoomNum: this.stateRoomNum, stateBedsNum: this.stateBedsNum, stateBedsStatus: this.stateBedsStatus }).then(response => {
          this.list = response.data
          this.total = response.data.length

          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      }
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: i18n.t('message.actionSuccess'),
        type: 'success'
      })
      row.status = status
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'bedsNum') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = '+bedsNum'
      } else {
        this.listQuery.sort = '-bedsNum'
      }
      this.handleFilter()
    },
    roomNumLeave(event) {
      if (store.getters.isDebugFlag) {
        console.log('in room leave')
      }
    },
    resetTemp() {
      this.temp = {
        bedsId: undefined,
        bedsNum: '',
        roomNum: '',
        companyNum: '',
        companyName: '',
        departmentNum: '',
        departmentName: '',
        bedsStatus: '',
        property: '',
        status: '保存'
      }
    },
    companyChange(event) {
      if (this.dialogStatus === 'create') {
        this.temp.departmentName = ''
        // this.temp.bedsNum = ''
        if (store.getters.isDebugFlag) {
          console.log(event)
        }
        const obj = this.company_list.find(item => { // model就是上面的數據源
          return item.companyName === event // 篩選出匹配數據
        })
        this.temp.companyNum = obj.companyNum
        this.splice_department_name_listQuery.companyNum = obj.companyNum
        this.splice_department_name_listQuery.companyName = obj.companyName
        fetchDepartmentNameList(this.splice_department_name_listQuery).then(response => {
          if (store.getters.isDebugFlag) {
            debugger
          }
          this.department_list = response.data
        })
      } else {
        if (store.getters.isDebugFlag) {
          console.log(event)
        }
        if (store.getters.isDebugFlag) {
          debugger
        }
        const obj = this.company_list.find(item => { // model就是上面的數據源
          return item.companyName === event // 篩選出匹配數據
        })
        this.temp.companyNum = obj.companyNum
        if (obj.companyName === this.temp2.companyName) {
          this.splice_department_name_listQuery.companyNum = obj.companyNum
          this.splice_department_name_listQuery.companyName = obj.companyName
          fetchDepartmentNameList(this.splice_department_name_listQuery).then(response => {
            this.department_list = response.data
          })
          this.temp.departmentNum = this.temp2.departmentNum
        } else {
          this.temp.departmentName = ''
          this.temp.bedsNum = ''
          this.splice_department_name_listQuery.companyNum = obj.companyNum
          this.splice_department_name_listQuery.companyName = obj.companyName
          fetchDepartmentNameList(this.splice_department_name_listQuery).then(response => {
            this.department_list = response.data
          })
        }
      }
      if (this.temp.roomNum === '' || this.temp.roomNum == null || this.temp.roomNum === undefined) {
        this.$notify({
          title: i18n.t('message.actionFailed'),
          message: '請填寫房間號',
          type: 'error',
          duration: 2000
        })
        return null
      }
    },
    departmentChange(event) {
      if (this.temp.roomNum === '' || this.temp.roomNum == null || this.temp.roomNum === undefined) {
        this.temp.departmentName = ''
        this.temp.companyName = ''
        // this.temp.bedsNum = ''
        this.$notify({
          title: i18n.t('message.actionFailed'),
          message: '請填寫房間號',
          type: 'error',
          duration: 2000
        })
        return
      }
      if (store.getters.isDebugFlag) {
        debugger
      }
      if (this.dialogStatus === 'create') {
        if (store.getters.isDebugFlag) {
          console.log(event)
        }
        const obj = this.department_list.find(item => { // model就是上面的數據源
          return item.departmentName === event // 篩選出匹配數據
        })
        this.temp.departmentNum = obj.departmentNum
      } else {
        if (store.getters.isDebugFlag) {
          console.log(event)
        }
        const obj = this.department_list.find(item => { // model就是上面的數據源
          return item.departmentName === event // 篩選出匹配數據
        })
        this.temp.departmentNum = obj.departmentNum
        if (obj.departmentName === this.temp2.departmentName) {
          this.temp.bedsNum = this.temp2.bedsNum
        } else {
          if (store.getters.isDebugFlag) {
            console.log('====')
          }
        }
      }
    },
    handleCreate() {
      this.getList()
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate(async(valid) => {
        if (valid) {
          try {
            const resultExisted = await checkNewXxxNum(this.temp).then(response => {
              const isExisted = response.data['isExisted']
              if (isExisted === '1') {
                this.$notify({
                  title: i18n.t('message.actionFailed'),
                  message: '已經存在該牀位號',
                  type: 'error',
                  duration: 2000
                })
                return true
              } else {
                return false
              }
            })
            if (store.getters.isDebugFlag) {
              console.log('resultExisted:' + resultExisted)
            }
            if (resultExisted) {
              return
            }
            insertXxxOne(this.temp).then(() => {
              // this.list.unshift(this.temp)
              this.dialogFormVisible = false
              this.$notify({
                title: i18n.t('message.actionSuccess'),
                message: i18n.t('message.buildSuccess'),
                type: 'success',
                duration: 2000
              })
              this.getList()
            })
          } catch (e) {
            console.log('error: request:' + e)
          }
        }
      })
    },
    handleUpdate(row) {
      this.getList()
      this.temp = Object.assign({}, row) // copy obj
      this.temp2 = this.temp
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      this.splice_department_name_listQuery.companyNum = this.temp.companyNum
      this.splice_department_name_listQuery.companyName = this.temp.companyName
      fetchDepartmentNameList(this.splice_department_name_listQuery).then(response => {
        this.department_list = response.data
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          updateXxxOne(tempData).then(() => {
            // for (const v of this.list) {
            //   if (v.bedsNum === this.temp.bedsNum) {
            //     const index = this.list.indexOf(v)
            //     this.list.splice(index, 1, this.temp)
            //     break
            //   }
            // }
            this.dialogFormVisible = false
            this.$notify({
              title: i18n.t('message.actionSuccess'),
              message: i18n.t('message.updateSuccess'),
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }
      })
    },
    handleDelete(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.$confirm(i18n.t('permission.isDeleteWarning'), i18n.t('permission.warning'), {
        confirmButtonText: i18n.t('permission.confirm'),
        cancelButtonText: i18n.t('permission.cancel'),
        type: 'warning'
      })
        .then(() => {
          deleteXxxOne(this.temp).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: i18n.t('message.actionSuccess'),
              message: i18n.t('message.deleteSuccess'),
              type: 'success',
              duration: 2000
            })
            const index = this.list.indexOf(row)
            // this.list.splice(index, 1)
            if (index === 0 && this.list.length === 1) {
              this.listQuery.page = this.listQuery.page - 1
            }
            this.getList()
          })
          this.temp2 = null
        })
        .catch(err => { console.error(err) })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['bedsNum', 'roomNum', 'companyName', 'departmentName', 'bedsStatus', 'property', 'status']
        const filterVal = ['bedsNum', 'roomNum', 'companyName', 'departmentName', 'bedsStatus', 'property', 'status']
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }
  }
}
</script>

<style scoped>

</style>

utils裏面的組件

// {項目根路徑}/src/utils/validate.js

/**
 * Created by PanJiaChen on 16/11/18.
 */

/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

/**
 * @param {string} url
 * @returns {Boolean}
 */
export function validURL(url) {
  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}

/**
 * @param {string} email
 * @returns {Boolean}
 */
export function validEmail(email) {
  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return reg.test(email)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function isString(str) {
  if (typeof str === 'string' || str instanceof String) {
    return true
  }
  return false
}

/**
 * @param {Array} arg
 * @returns {Boolean}
 */
export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}

/**
 * @param {string} value
 * @returns {Boolean}
 */
export function validSpecialCharacter(rule, value, callback) {
  const reg = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]")
  if (reg.test(value)) {
    callback(new Error('包含特殊字符,請輸入正確的格式'))
  } else {
    callback()
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 */
export function isMobile(rule, value, callback) {
  const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
  if (!reg.test(value)) {
    callback(new Error('非手機號格式,請輸入正確的格式'))
  } else {
    callback()
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * 驗證是否整數
 */
export function isInteger(rule, value, callback) {
  if (!Number(value)) {
    callback(new Error('請輸入正整數'))
  } else {
    const re = /^[0-9]*[1-9][0-9]*$/
    const rsCheck = re.test(value)
    if (!rsCheck) {
      callback(new Error('請輸入正整數'))
    } else {
      callback()
    }
  }
}

/**
 * @param {string} value
 * @returns {Boolean}
 * 驗證是否是牀位號規則
 * (這個驗證是該項目用到的，不是通用的)
 */
export function isBedsRules(rule, value, callback) {
  const re = /^(\+?)([\u4e00-\u9fa5]+)?([0-9]*[1-9][0-9]*)$/
  const rsCheck = re.test(value)
  if (!rsCheck) {
    callback(new Error('請輸入正整數或者+1,走1形式'))
  } else {
    callback()
  }
}

在{項目根路徑}/src/store/getters.js裏面填寫公共變量的賦值地址,並在{項目根路徑}/src/store/modules/底下新建globalSpace.js，該文件名自定義，裏面存放公共變量

// {項目根路徑}/src/store/getters.js

const getters = {
  sidebar: state => state.app.sidebar,
  language: state => state.app.language,
  size: state => state.app.size,
  device: state => state.app.device,
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  introduction: state => state.user.introduction,
  roles: state => state.user.roles,
  permission_routes: state => state.permission.routes,
  errorLogs: state => state.errorLog.logs,
  baseUrl: state => state.globalSpace.baseUrl,
  basePort: state => state.globalSpace.basePort,
  companyManageCacheFlag: state => state.globalSpace.companyManageCacheFlag,
  isDebugFlag: state => state.globalSpace.isDebugFlag
}
export default getters

// {項目根路徑}/src/store/modules/globalSpace.js

/**
 * @time: 13:43
 */
const state = {
  baseUrl: 'http://xx.xx.xx.xx',
  basePort: '10000',
  companyManageCacheFlag: true,
  isDebugFlag: false
}

const mutations = {
  SET_BASE_URL: (state, baseUrl) => {
    state.baseUrl = baseUrl
  },
  SET_BASE_PORT: (state, basePort) => {
    state.basePort = basePort
  },
  SET_COMPANY_MANAGE_CACHE_FLAG: (state, companyManageCacheFlag) => {
    state.companyManageCacheFlag = companyManageCacheFlag
  },
  SET_IS_DEBUG_FLAG: (state, isDebugFlag) => {
    state.isDebugFlag = isDebugFlag
  }
}

const actions = {
  changeBaseUrl({ commit }, baseUrl) {
    commit('SET_BASE_URL', baseUrl)
  },
  changeBasePort({ commit }, basePort) {
    commit('SET_BASE_PORT', basePort)
  },
  changeCompanyManageCacheFlag({ commit }, companyManageCacheFlag) {
    commit('SET_COMPANY_MANAGE_CACHE_FLAG', companyManageCacheFlag)
  },
  changeIsDebugFlag({ commit }, isDebugFlag) {
    commit('SET_IS_DEBUG_FLAG', isDebugFlag)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在{項目根路徑}/src/store/modules/user.js裏面將後臺驗證的token填入。

// {項目根路徑}/src/store/modules/user.js

	......
	login({ commit }, userInfo) {
    if (store.getters.isDebugFlag) {
      console.log('modules_user outer====')
    }
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then((response) => {
        if (store.getters.isDebugFlag) {
          console.log('modules_user inner====')
          console.log('response: ' + JSON.stringify(response))
        }
        /*********set token start***********/
        const data = response.result
        commit('SET_TOKEN', data.Authorization)
        setToken(data.Authorization)
        /*********set token end***********/
        // const { data } = response
        // commit('SET_TOKEN', data.token)
        // setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
	......

接下來是修改vue 的 router信息：
在{項目根路徑}/src/router/modules/下面添加自定義的新的功能模塊路由，再在{項目根路徑}/src/router/index.js裏面引入剛纔新添加的路由地址，這樣就能顯示並可以實現點擊跳轉了。

// {項目根路徑}/src/router/modules/xxxManage.js

/**
 * @time: 16:06
 */
import Layout from '@/layout'

const xxxRouter = {
  path: '/xxx',
  component: Layout,
  redirect: '/xxx/yyy',
  name: 'Xxx',
  meta: {
    title: 'xxx',
    icon: 'list'
  },
  children: [
    {
      path: 'yyy',
      component: () => import('@/views/xxx/yyy'),
      name: 'Yyy',
      meta: { title: 'yyy' }
    }
  ]
}
export default xxxRouter

// {項目根路徑}/src/router/index.js
......
import xxxRouter from './modules/xxxManage'
......
export const asyncRoutes = [
	......
	xxxRouter,
	......
]

訪問後臺的接口地址均放在{項目根路徑}/src/api/下

// {項目根路徑}/src/api/xxx-request.js

/**
 * @time: 20:47
 */
import request from '@/utils/request'
import store from '@/store'

export function fetchXxxList(query) {
  return request({
    url: store.getters.baseUrl + ':' + store.getters.basePort + '/aaaController/getAaaAll',
    contentType: 'application/json',
    method: 'post',
    params: query
  })
}

export function fetchXxxByCondition(data) {
  return request({
    url: store.getters.baseUrl + ':' + store.getters.basePort + '/aaaController/fetchByCondition',
    method: 'post',
    data
  })
}

export function fetchBbbStatusAll(query) {
  return request({
    url: store.getters.baseUrl + ':' + store.getters.basePort + '/aaaController/getBbbStatusAll',
    method: 'post',
    params: query
  })
}

export function fetchMaxBbbNum(data) {
  return request({
    url: store.getters.baseUrl + ':' + store.getters.basePort + '/aaaController/fetchMaxBbbNum',
    method: 'post',
    data
  })
}

export function fetchBbbPropertyAll(query) {
  return request({
    url: store.getters.baseUrl + ':' + store.getters.basePort + '/aaaController/getBbbPropertyAll',
    method: 'post',
    params: query
  })
}

export function fetchBedsNumAll(query) {
  return request({
    url: store.getters.baseUrl + ':' + store.getters.basePort + '/aaaController/fetchBbbNumAll',
    method: 'post',
    params: query
  })
}

export function checkNewAaaNum(data) {
  return request({
    url: store.getters.baseUrl + ':' + store.getters.basePort + '/aaaController/checkNewAaaNum',
    method: 'post',
    data
  })
}

export function insertAaaOne(data) {
  return request({
    url: store.getters.baseUrl + ':' + store.getters.basePort + '/aaaController/insertAaaOne',
    method: 'post',
    data
  })
}

export function updateAaaOne(data) {
  return request({
    url: store.getters.baseUrl + ':' + store.getters.basePort + '/aaaController/updateAaaOne',
    method: 'post',
    data
  })
}

export function deleteAaaOne(data) {
  return request({
    url: store.getters.baseUrl + ':' + store.getters.basePort + '/aaaController/deleteAaaOne',
    method: 'post',
    data
  })
}

在{項目根路徑}/src/api/user.js下修改/login的地址，改成訪問的後臺地址。

//  {項目根路徑}/src/api/user.js

import request from '@/utils/request'
import store from '@/store'

export function login(data) {
  return request({
    url: store.getters.baseUrl + ':' + store.getters.basePort + '/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: store.getters.baseUrl + ':' + store.getters.basePort + '/loginController/getLoginInfoAndRole',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/user/logout',
    method: 'post'
  })
}

再在{項目根路徑}/build/index.js下修改端口號。

//  {項目根路徑}/build/index.js

  ......
  const port = 10000
  ......