小白先去参考这个链接
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
......
扫一扫
1721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
