提交 d0203b45 authored 作者: 谢廷雅's avatar 谢廷雅
import request from '@/utils/request'
// 修改统计点账号状态
export function changeStatus(id) {
return request({
url: '/backstage/point/changeStatus/'+id,
method: 'put'
})
}
// 查询统计点详细
export function listBySuperiorId(id) {
return request({
url: '/backstage/point/listBySuperiorId/' + id,
method: 'get'
})
}
// 查询统计点列表(省级列表)
export function listByProvince(query) {
return request({
url: '/backstage/point/listByProvince',
method: 'get',
params: query
})
}
// 查询统计点列表(级联列表)
export function cascadeList(type) {
return request({
url: '/backstage/point/cascadeList?type=' + type,
method: 'get'
})
}
// 查询统计点列表
export function listPoint(query) {
return request({
url: '/backstage/point/list',
method: 'get',
params: query
})
}
// 查询统计点详细
export function getPoint(id) {
return request({
url: '/backstage/point/' + id,
method: 'get'
})
}
// 新增统计点
export function addPoint(data) {
return request({
url: '/backstage/point',
method: 'post',
data: data
})
}
// 修改统计点
export function updatePoint(data) {
return request({
url: '/backstage/point',
method: 'put',
data: data
})
}
// 删除统计点
export function delPoint(id) {
return request({
url: '/backstage/point/' + id,
method: 'delete'
})
}
// 导出统计点
export function exportPoint(query) {
return request({
url: '/backstage/point/export',
method: 'get',
params: query
})
}
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="名称" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="账号" prop="account">-->
<!-- <el-input-->
<!-- v-model="queryParams.account"-->
<!-- placeholder="请输入账号"-->
<!-- clearable-->
<!-- size="small"-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="密码" prop="password">-->
<!-- <el-input-->
<!-- v-model="queryParams.password"-->
<!-- placeholder="请输入密码"-->
<!-- clearable-->
<!-- size="small"-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="状态" prop="status">-->
<!-- <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">-->
<!-- <el-option label="请选择字典生成" value="" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="经度" prop="longitude">-->
<!-- <el-input-->
<!-- v-model="queryParams.longitude"-->
<!-- placeholder="请输入经度"-->
<!-- clearable-->
<!-- size="small"-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="纬度" prop="latitude">-->
<!-- <el-input-->
<!-- v-model="queryParams.latitude"-->
<!-- placeholder="请输入纬度"-->
<!-- clearable-->
<!-- size="small"-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="上级id" prop="superiorId">-->
<!-- <el-input-->
<!-- v-model="queryParams.superiorId"-->
<!-- placeholder="请输入上级id"-->
<!-- clearable-->
<!-- size="small"-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="统计点类型" prop="type">-->
<!-- <el-select v-model="queryParams.type" placeholder="请选择统计点类型" clearable size="small">-->
<!-- <el-option label="请选择字典生成" value="" />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item>
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['backstage:point:add']"
>新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['backstage:point:edit']"
>修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['backstage:point:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
icon="el-icon-download"
size="mini"
@click="handleExport"
v-hasPermi="['backstage:point:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table
:data="pointList"
style="width: 100%"
row-key="id"
:indent="50"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" :index="table_index" label="序号" align="center" prop="id"/>
<el-table-column label="名称" align="center" prop="name" />
<el-table-column label="账号" align="center" prop="account" />
<!-- <el-table-column label="密码" align="center" prop="password" />-->
<el-table-column label="经度" align="center" prop="longitude" />
<el-table-column label="纬度" align="center" prop="latitude" />
<!-- <el-table-column label="上级id" align="center" prop="superiorId" />-->
<el-table-column label="统计点类型" align="center" prop="type" >
<<template scope="scope">
<span v-if="scope.row.type == 1">省级</span>
<span v-if="scope.row.type == 2">市级</span>
<span v-if="scope.row.type == 3">县级</span>
<span v-if="scope.row.type == 4">乡级</span>
<span v-if="scope.row.type == 5">村级</span>
<span v-if="scope.row.type == 6">自然村</span>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status" >
<template scope="scope">
<el-switch
v-model="scope.row.status"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="0"
inactive-value="1"
@change="changeStatus(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['backstage:point:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['backstage:point:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改统计点对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>
<div v-if="this.statisticsPointsType != '6'">
<el-form-item label="账号" prop="account">
<el-input v-model="form.account" placeholder="请输入账号" />
</el-form-item>
<el-form-item label="登录密码" prop="password">
<el-input show-password type="password" v-model="form.password" autocomplete="off" placeholder="密码要求:8-20位字符在数字、小写、大写字母以及特殊字符中四选三"></el-input>
<el-progress :percentage="passwordPercent" :format="passwordPercentFormat"></el-progress>
</el-form-item>
<el-form-item label="再次输入密码" prop="comfirmPassword">
<el-input show-password type="password" v-model="form.comfirmPassword" autocomplete="off"></el-input>
</el-form-item>
<!-- <el-form-item label="密码" prop="password">-->
<!-- <el-input placeholder="请输入密码" type="password" v-model="form.password" show-password></el-input>-->
<!-- </el-form-item>-->
</div>
<el-form-item v-if="this.statisticsPointsType != '1'" label="所属层级" prop="levelValue">
<div class="block">
<span class="demonstration"></span>
<el-cascader
style="width: 100%"
v-model="form.levelValue"
:options="levelOptions"
:props="{ expandTrigger: 'hover' }"
@change="handleChange"
clearable></el-cascader>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" :disabled="repeatSubmit">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 新增统计点类型弹框-->
<el-dialog
title="请选择新增统计点类型"
:visible.sync="addStatisticsTypeStatus"
width="70%"
>
<el-radio-group v-model="statisticsPointsType">
<el-radio v-for="item in statisticsPointsTypeObj" :label="item.label" >{{item.name}}</el-radio>
</el-radio-group>
<span slot="footer" class="dialog-footer">
<el-button @click="addStatisticsTypeStatus = false">取 消</el-button>
<el-button type="primary" @click="handleAddStatisticsPointsType">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { changeStatus, listBySuperiorId, listByProvince, cascadeList, listPoint, getPoint, delPoint, addPoint, updatePoint, exportPoint } from "@/api/backstage/point";
export default {
name: "Point",
data() {
const validatePassword = (rule, value, callback) => {
// console.log(value)
if (value === '' || value === undefined || value === null) {
if(this.form.id == null){
callback(new Error('如需新增统计点的相关信息,请输入统计点的密码后才能进行操作'));
}else {
callback(new Error('如需修改统计点的相关信息,请输入统计点的密码后才能进行编辑修改'));
}
} else {
//6-20位包含字符、数字和特殊字符
var ls = 0;
if (this.form.password !== '') {
if(this.form.password.match(/([a-z])+/)){
ls++;
}
if(this.form.password.match(/([0-9])+/)){
ls++;
}
if(this.form.password.match(/([A-Z])+/)){
ls++;
}
if(this.form.password.match(/([\W])+/) && !this.form.password.match(/(![\u4E00-\u9FA5])+/)){ ls++;
}
if(this.form.password.length<6 || this.form.password.length>20 ){
callback(new Error('要求6-20位字符'));
ls=0;
}
if(this.form.password.match(/([\u4E00-\u9FA5])+/)){
callback(new Error('不能包含中文字符'));
ls=0;
}
switch (ls) {
case 0: this.passwordPercent = 0;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;
case 1: this.passwordPercent = 33;callback(new Error('数字、小写字母、大写字母以及特殊字符中四选三'));break;
case 2: this.passwordPercent = 66;callback(new Error('数字、小写字母 、大写字母以及特殊字符中四选三'));break;
case 3:
case 4: this.passwordPercent = 100;break;
default: this.passwordPercent = 0;break;
}
}
callback();
}
};
const validateConfirmPassword = (rule, value, callback) => {
if (value === '' || value === null) {
callback(new Error('请输入密码'));
} else {
if (this.form.comfirmPassword !== this.form.password) {
callback(new Error('两次输入的密码不一致'));
// this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
return {
//密码进度条
passwordPercent:0,
//级联选择器相关
// levelValue: [],
levelOptions: [],
//统计点类型对象
statisticsPointsTypeObj: [
{label:1,name:"省级(省份/直辖市/自治区)"},
{label:2,name:"地级(城市)"},
{label:3,name:"县级(区县)"},
{label:4,name:"乡级(乡镇/街道)"},
{label:5,name:"村级(村委会/居委会)"},
{label:6,name:"自然村"},
],
//统计点类型
statisticsPointsType: '',
//新增统计点类型弹框状态
addStatisticsTypeStatus: false,
// 不可重复提交
repeatSubmit: false,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 统计点表格数据
pointList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
account: null,
password: null,
status: null,
longitude: null,
latitude: null,
superiorId: null,
type: null,
},
// 表单参数
form: {
name: null,
account: null,
password: null,
status: null,
longitude: null,
latitude: null,
superiorId: null,
type: null,
comfirmPassword: null,
levelValue: null,
},
// 表单校验
rules: {
name: [
{ required: true, message: "统计点名称不能为空,请输入统计点名称", trigger: "blur" }
],
account: [
{ required: true, message: "统计点账号不能为空,请输入统计点账号", trigger: "blur" }
],
password:[
{required: true, validator: validatePassword, trigger: ['blur', 'change'] },
],
comfirmPassword:[
{required: true, validator: validateConfirmPassword, trigger: ['blur', 'change'] }
],
levelValue:[
{required: true, message: "统计点所属层级不能为空,请选择统计点层级", trigger: 'change' }
],
}
};
},
created() {
this.getList();
},
methods: {
/** 查询统计点列表 */
getList() {
this.loading = true;
listByProvince(this.queryParams).then(response => {
this.pointList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
name: null,
account: null,
password: null,
status: "0",
longitude: null,
latitude: null,
superiorId: null,
type: null,
createTime: null,
updateTime: null,
levelValue: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length!==1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.statisticsPointsType = '';//初始化统计点类型
this.passwordPercent = 0;//初始化密码进度条
this.addStatisticsTypeStatus = true;
},
//选择新增类型确定按钮
handleAddStatisticsPointsType(){
if(this.statisticsPointsType == null || this.statisticsPointsType == ''){
this.$message.error("请选择新增统计点的类型");
return;
}
//获取标题名称
let titleName = this.statisticsPointsTypeObj[this.statisticsPointsType-1].name;
this.addStatisticsTypeStatus = false;
this.reset();
this.open = true;
this.title = "添加"+titleName+"统计点";
//获取所有统计点级联数据
this.cascadeList();
},
//获取所有统计点级联数据
cascadeList(){
if(this.statisticsPointsType != '1'){
cascadeList(this.statisticsPointsType).then(res=>{
this.levelOptions = res.data;
});
}
},
/** 修改按钮操作 */
handleUpdate(row) {
this.passwordPercent = 0;//初始化密码进度条
this.reset();
const id = row.id || this.ids;
getPoint(id).then(response => {
this.form = response.data;
this.form.levelValue = JSON.parse(response.data.levelValue)
console.log(this.form.levelValue)
this.open = true;
this.title = "修改统计点";
this.statisticsPointsType = response.data.type;
this.form.password = "";
//获取所有统计点级联数据
this.cascadeList();
});
},
/** 提交按钮 */
submitForm() {
this.repeatSubmit=true
setTimeout(()=>{
this.repeatSubmit = false //点击一次时隔两秒后才能再次点击
},2000)
this.$refs["form"].validate(valid => {
if (valid) {
this.form.type = this.statisticsPointsType;//统计点类型
if(this.statisticsPointsType !== "1"){
this.form.superiorId = this.form.levelValue[this.form.levelValue.length-1];//上级id
this.form.levelValue = JSON.stringify(this.form.levelValue)
}
if (this.form.id != null) {
updatePoint(this.form).then(response => {
if(response.code === 200){
this.msgSuccess("修改成功");
this.open = false;
this.pointList = [];//刷新
this.getList();
}else {
this.form.levelValue = JSON.parse(this.form.levelValue)
}
});
} else {
addPoint(this.form).then(response => {
if(response.code === 200){
this.msgSuccess("新增成功");
this.open = false;
this.pointList = [];//刷新
this.getList();
}else {
this.form.levelValue = JSON.parse(this.form.levelValue)
}
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm('是否确认删除统计点数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return delPoint(ids);
}).then(() => {
this.getList();
this.msgSuccess("删除成功");
})
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm('是否确认导出所有统计点数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function() {
return exportPoint(queryParams);
}).then(response => {
this.download(response.msg);
})
},
//自增序号
table_index(index) {
return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1
},
handleChange(value) {
// console.log(value);
},
passwordPercentFormat(percentage){
return percentage === 100 ? '符合' : `不符`;
},
//树形表格懒加载
load(tree, treeNode, resolve) {
setTimeout(() => {
//通过上级id查询统计点列表(实现懒加载)
listBySuperiorId(tree.id).then(res=>{
resolve(res.data)
}).catch(()=>{
resolve([])
});
}, 1000)
},
//改变账号状态
changeStatus(row){
let title = '';
if(row.status == '0'){
title = '启用';
}else {
title = '禁用';
}
this.$confirm('是否确认'+ title +'账号状态?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() =>{
changeStatus(row.id).then(response => {
this.msgSuccess(title + "成功");
this.open = false;
this.getList();
});
}).catch(() => {
this.getList();
this.$message.error('取消操作')
})
},
}
};
</script>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论