|
|
@@ -22,6 +22,7 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<el-table
|
|
|
+ height="670"
|
|
|
:data="dataList"
|
|
|
@selection-change="selectionChangeHandle"
|
|
|
v-loading="dataListLoading"
|
|
|
@@ -39,10 +40,13 @@
|
|
|
label="名称">
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- prop="location"
|
|
|
header-align="center"
|
|
|
align="center"
|
|
|
label="地址">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ comLocation(scope.row.location) }}
|
|
|
+ <!-- {{scope.row.location}} -->
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
prop="manager"
|
|
|
@@ -68,37 +72,48 @@
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+ <div class="block">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="sizeChangeHandle"
|
|
|
+ @current-change="currentChangeHandle"
|
|
|
+ :current-page="pageIndex"
|
|
|
+ :page-sizes="[10, 12, 15, 20]"
|
|
|
+ :page-size="pageSize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="totalPage">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
<el-dialog
|
|
|
:title="!form.id ? '新增' : '修改'"
|
|
|
:close-on-click-modal="false"
|
|
|
:visible.sync="visible"
|
|
|
@close="cancel">
|
|
|
- <el-form :model="form" ref="form" @keyup.enter.native="formSubmit()" label-width="80px">
|
|
|
- <el-form-item label="牧场名称">
|
|
|
+ <el-form :model="form" :rules="dataRule" ref="form" @keyup.enter.native="formSubmit()" label-width="80px">
|
|
|
+ <el-form-item label="牧场名称" prop="name">
|
|
|
<el-input v-model="form.name" placeholder="牧场名称"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="管理员">
|
|
|
+ <el-form-item label="管理员" prop="manager">
|
|
|
<el-input v-model="form.manager" placeholder="牧场管理员"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="省市区">
|
|
|
+ <el-form-item label="省市区" prop="selectedOptions">
|
|
|
<el-cascader
|
|
|
size="large"
|
|
|
:options="options"
|
|
|
- v-model="selectedOptions"
|
|
|
+ v-model="form.selectedOptions"
|
|
|
@change="getlocation"
|
|
|
placeholder="请选择省市区"
|
|
|
style="width: 100%">
|
|
|
</el-cascader>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="具体地址">
|
|
|
+ <el-form-item label="具体地址" prop="location2">
|
|
|
<el-input v-model="form.location2" placeholder="地址"></el-input>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="日期" prop="buildTime">
|
|
|
+ <el-form-item label="建立日期" prop="buildTime">
|
|
|
<el-date-picker
|
|
|
v-model="form.buildTime"
|
|
|
type="date"
|
|
|
value-format="yyyy-MM-dd"
|
|
|
- placeholder="选择日期"
|
|
|
+ placeholder="选择建立日期"
|
|
|
style="width: 100%">
|
|
|
</el-date-picker>
|
|
|
</el-form-item>
|
|
|
@@ -139,16 +154,51 @@ export default {
|
|
|
location2: '',
|
|
|
manager: '',
|
|
|
name: '',
|
|
|
- buildTime: ''
|
|
|
+ buildTime: '',
|
|
|
+ selectedOptions: []
|
|
|
},
|
|
|
options: regionData,
|
|
|
- selectedOptions: []
|
|
|
+ selectedOptions: [],
|
|
|
+ dataRule: { // 校验规则
|
|
|
+ name: [
|
|
|
+ { required: true, message: '牧场名称不能为空', trigger: 'blur' },
|
|
|
+ { min: 1, max: 50, message: '长度在 1 到 50 个字符之间', trigger: ['blur', 'change'] },
|
|
|
+ { type: 'string' , message: '只允许输入中英文、数字、-与_', pattern: /[\w\u4E00-\u9FA5\-]+$/g }
|
|
|
+ ],
|
|
|
+ manager: [
|
|
|
+ { required: true, message: '管理员不能为空', trigger: 'blur' },
|
|
|
+ { min: 1, max: 5, message: '长度在 1 到 5 个字符之间', trigger: ['blur', 'change'] },
|
|
|
+ { type: 'string' , message: '只允许输入中英文、数字、-与_', pattern: /[\w\u4E00-\u9FA5\-]+$/g }
|
|
|
+ ],
|
|
|
+ selectedOptions: [
|
|
|
+ { required: true, message: '省市区不能为空', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ location2: [
|
|
|
+ { required: true, message: '具体地址不能为空', trigger: 'blur' },
|
|
|
+ { type : 'string' , message: '只允许输入中英文、数字、_、！与!的输入', pattern: /[\w\u4E00-\u9FA5\!\！]+$/g }
|
|
|
+ ],
|
|
|
+ buildTime: [
|
|
|
+ { required: true, message: '日期不能为空', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
|
this.getDataList()
|
|
|
},
|
|
|
methods: {
|
|
|
+ comLocation(location) {
|
|
|
+ let arr = location.split(",")
|
|
|
+ let loc = ''
|
|
|
+ if (arr.length === 1) {
|
|
|
+ return location
|
|
|
+ }
|
|
|
+ for (let i = 0; i < arr.length - 1; i++) {
|
|
|
+ loc += CodeToText[arr[i]]
|
|
|
+ }
|
|
|
+ loc += arr[arr.length - 1]
|
|
|
+ return loc
|
|
|
+ },
|
|
|
// 获取数据列表
|
|
|
getDataList () {
|
|
|
this.dataListLoading = true
|
|
|
@@ -156,8 +206,8 @@ export default {
|
|
|
url: this.$http.adornUrl('/management/pasture/list'),
|
|
|
method: 'post',
|
|
|
params: this.$http.adornParams({
|
|
|
- page: 1,
|
|
|
- limit: 10,
|
|
|
+ page: this.pageIndex,
|
|
|
+ limit: this.pageSize,
|
|
|
keywords: this.dataForm.key
|
|
|
})
|
|
|
}).then(({ data }) => {
|
|
|
@@ -181,11 +231,11 @@ export default {
|
|
|
getlocation () {
|
|
|
var loc = "";
|
|
|
this.form.location1 = ''
|
|
|
- for (let i = 0; i < this.selectedOptions.length; i++) {
|
|
|
- loc += CodeToText[this.selectedOptions[i]];
|
|
|
- this.form.location1 += this.selectedOptions[i] + ','
|
|
|
+ for (let i = 0; i < this.form.selectedOptions.length; i++) {
|
|
|
+ loc += CodeToText[this.form.selectedOptions[i]];
|
|
|
+ this.form.location1 += this.form.selectedOptions[i] + ','
|
|
|
}
|
|
|
- console.log('当前地址为' + loc);
|
|
|
+ console.log(loc);
|
|
|
},
|
|
|
// 当前页
|
|
|
currentChangeHandle (val) {
|
|
|
@@ -197,7 +247,22 @@ export default {
|
|
|
// 显示牧场新增 or 修改面板
|
|
|
this.visible = true
|
|
|
if (row) {
|
|
|
- this.form = row
|
|
|
+ let location = row.location
|
|
|
+ let arr = location.split(",")
|
|
|
+ this.form.selectedOptions = []
|
|
|
+ if (arr.length === 1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.form.location1 = ''
|
|
|
+ for (let i = 0; i < arr.length - 1; i++) {
|
|
|
+ this.form.selectedOptions.push(arr[i])
|
|
|
+ this.form.location1 += arr[i] + ','
|
|
|
+ }
|
|
|
+ this.form.buildTime = row.buildTime
|
|
|
+ this.form.id = row.id
|
|
|
+ this.form.manager = row.manager
|
|
|
+ this.form.name = row.name
|
|
|
+ this.form.location2 = arr[arr.length - 1]
|
|
|
}
|
|
|
},
|
|
|
// 选择n个牧场
|
|
|
@@ -330,17 +395,21 @@ export default {
|
|
|
for (let i in this.form) {
|
|
|
this.form[i] = ''
|
|
|
}
|
|
|
+ this.form.selectedOptions = []
|
|
|
this.getDataList()
|
|
|
},
|
|
|
// 取消
|
|
|
cancel () {
|
|
|
this.visible = false
|
|
|
- this.resetForm()
|
|
|
+ // 如果新增，则不保留form
|
|
|
+ if (this.form.id) {
|
|
|
+ this.resetForm()
|
|
|
+ }
|
|
|
},
|
|
|
// 校验输入是否完整
|
|
|
validComplete (val) {
|
|
|
this.form.location = this.form.location1 + this.form.location2
|
|
|
- val && (delete this.form.id, delete this.form.deleted, delete this.form.gmtCreate, delete this.form.gmtModified)
|
|
|
+ val && (delete this.form.id)
|
|
|
for (let i in this.form) {
|
|
|
if (!this.form[i].toString()) {
|
|
|
return false
|
|
|
@@ -350,7 +419,6 @@ export default {
|
|
|
},
|
|
|
// 如不完整，则提示
|
|
|
confirmComplete (val) {
|
|
|
- console.log(this.form);
|
|
|
if (this.validComplete(val)) {
|
|
|
return true
|
|
|
}
|
|
|
@@ -366,32 +434,50 @@ export default {
|
|
|
// 校验输入是否合法
|
|
|
validInput () {
|
|
|
// 只允许中文、英文、数字、-、_的输入，取反
|
|
|
- const reg = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5\_\-]/g
|
|
|
+ const reg = /[^\w\u4E00-\u9FA5\_\-]/g
|
|
|
if (reg.test(this.form.name)) {
|
|
|
- return false
|
|
|
+ return 1
|
|
|
}
|
|
|
if (reg.test(this.form.manager)) {
|
|
|
- return false
|
|
|
+ return 2
|
|
|
}
|
|
|
- // TODO:牧场管理-新增-地址的正则表达式
|
|
|
- // 只允许中文、字母、标点输入
|
|
|
- // if (reg.test(this.form.location)) {
|
|
|
- // return false
|
|
|
- // }
|
|
|
- console.log(this.form.location2);
|
|
|
- const reg1 = /[^\a-\z\A-\Z\u4E00-\u9FA5\!\！]/g
|
|
|
- console.log(reg1.test(this.form.location2));
|
|
|
- if (reg1.test(this.form.location2)) {
|
|
|
- return false
|
|
|
+ // 只允许中文、英文、下划线、！、!的输入
|
|
|
+ const a = /[^\w\u4E00-\u9FA5\!\！]/g
|
|
|
+ if (a.test(this.form.location2)) {
|
|
|
+ return 3
|
|
|
}
|
|
|
- return true
|
|
|
+ // 建立日期不得大于今日
|
|
|
+ let build = new Date(this.form.buildTime)
|
|
|
+ let now = new Date()
|
|
|
+ if (build > now) {
|
|
|
+ console.log('建立日期有误');
|
|
|
+ return 4
|
|
|
+ }
|
|
|
+ return 0
|
|
|
},
|
|
|
// 如不合法，则提示
|
|
|
confirmInput () {
|
|
|
- if (this.validInput()) {
|
|
|
+ if (this.validInput() === 0) {
|
|
|
return true
|
|
|
}
|
|
|
- this.$confirm(`只允许输入中英文、数字、-与_`, '提示', {
|
|
|
+ let msg = ''
|
|
|
+ switch (this.validInput()) {
|
|
|
+ case 1:
|
|
|
+ msg = '牧场名称只允许中英文、数字、-、_的输入'
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ msg = '管理员只允许中英文、数字、-、_的输入'
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ msg = '具体地址只允许中英文、数字、_、！与!的输入'
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ msg = '建立日期选择有误'
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ this.$confirm(msg, '提示', {
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
type: 'warning'
|
East