NurseStationUI/src/views/system/station/index.vue
2022-11-17 10:37:35 +08:00

980 lines
28 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="100px"
>
<el-form-item
label="护理站名称"
prop="nurseStationName"
v-if="nurseStationlist.find((e) => e.isAdmin == '1')"
>
<el-input
v-model="queryParams.nurseStationName"
placeholder="请输入护理站"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="所属护理站" prop="nurseStationName" v-else>
<el-input
v-model="queryParams.nurseStationName"
placeholder="请输入护理站"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="护理站编号" prop="nurseStationCode">
<el-input
v-model="queryParams.nurseStationCode"
placeholder="请输入护理站编号"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
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"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:station:add']"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:station:edit']"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="info"
plain
icon="el-icon-upload2"
size="mini"
@click="handledata"
v-hasPermi="['system:station:importData']"
>导入</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="stationList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column
label="护理站编号"
align="center"
prop="nurseStationCode"
width="150"
/>
<el-table-column
label="护理站名称"
align="center"
prop="nurseStationName"
:show-overflow-tooltip="true"
/>
<el-table-column label="所属区域" align="center" prop="area">
<template slot-scope="scope">
<span>{{
scope.row.areaName !== "null-null-null-null"
? scope.row.areaName
: ""
}}</span>
</template>
</el-table-column>
<el-table-column
label="护理站地址"
align="center"
prop="address"
:show-overflow-tooltip="true"
/>
<el-table-column label="护理站经度" align="center" prop="longitude" />
<el-table-column label="护理站纬度" align="center" prop="latitude" />
<el-table-column label="联系电话" align="center" prop="phone" />
<el-table-column label="负责人" align="center" prop="dutyPerson" />
<el-table-column label="负责人电话" align="center" prop="dutyPhone" />
<el-table-column label="创建时间" align="center" prop="createTime" />
<el-table-column label="创建人" align="center" prop="createBy" />
<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="['system:station:edit']"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:station: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="liststationinfo"
/>
<!-- 新增护理站信息对话框 -->
<el-dialog
:title="title"
:visible.sync="open"
width="800px"
append-to-body
:before-close="cancel"
>
<el-form
:inline="true"
ref="form"
:model="form"
:rules="rules"
label-width="120px"
>
<el-form-item label="所属区域" prop="areaCode">
<el-select
v-model="form.provinceName"
clearable
placeholder="请选择省"
style="width: 129px"
>
<el-option
v-for="item in provincelist"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode"
@click.native="province(item)"
>
</el-option>
</el-select>
<el-select
v-model="form.cityName"
clearable
placeholder="请选择市"
style="width: 129px; margin-left: 10px"
>
<el-option
v-for="item in citylist"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode"
@click.native="clickcity(item)"
>
</el-option>
</el-select>
<el-select
v-model="form.regionName"
clearable
placeholder="请选择区"
style="width: 129px; margin-left: 10px"
>
<el-option
v-for="item in arealist"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode"
@click.native="clickarea(item)"
>
</el-option>
</el-select>
<el-select
v-model="form.streetCode"
clearable
placeholder="请选择街道"
style="width: 129px; margin-left: 10px"
>
<el-option
v-for="item in streetlist"
:key="item.areaCode"
:label="item.areaName"
:value="item.areaCode"
@click.native="clickstreet(item)"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="护理站名称" prop="nurseStationName">
<el-input
v-model="form.nurseStationName"
placeholder="请输入护理站名称"
maxlength="40"
/>
</el-form-item>
<el-form-item label="护理站地址" prop="address">
<el-input
v-model="form.address"
placeholder="请输入护理站地址"
maxlength="80"
/>
</el-form-item>
<el-form-item label="护理站经度" prop="longitude">
<el-input
v-model="form.longitude"
placeholder="请输入护理站经度"
type="number"
oninput=" if(value.length>10){value=value.slice(0,20)}"
/>
</el-form-item>
<el-form-item label="护理站纬度" prop="latitude">
<el-input
v-model="form.latitude"
placeholder="请输入护理站纬度"
type="number"
oninput=" if(value.length>10){value=value.slice(0,20)}"
/>
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input
v-model="form.phone"
placeholder="请输入联系电话"
maxlength="11"
/>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input
v-model="form.sort"
placeholder="排序不可输入小数点"
type="number"
min="0"
oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+0)} if(value.length>8){value=value.slice(0,8)}"
/>
</el-form-item>
<el-form-item label="负责人" prop="dutyPerson">
<el-input
v-model="form.dutyPerson"
placeholder="请输入负责人"
maxlength="20"
/>
</el-form-item>
<el-form-item label="负责人电话" prop="dutyPhone">
<el-input
v-model="form.dutyPhone"
placeholder="请输入负责人联系电话"
maxlength="11"
/>
</el-form-item>
<el-form-item label="护理站总概述" prop="nurseStationDescription">
<el-input
style="width: 540px"
v-model="form.nurseStationDescription"
placeholder="请输入护理站信息总概述"
type="textarea"
maxlength="150"
/>
</el-form-item>
<el-form-item label="护理站简介" prop="agencyIntroduce">
<editor
:min-height="62"
style="width: 90%; margin: 0 auto"
v-model="form.agencyIntroduce"
></editor>
</el-form-item>
<el-form-item
label="护理站头像"
prop="stationPictureUrl"
required
style="margin-left: 10%"
>
<stationAcatar
@imgUrl="imgUrl"
:img="form.stationPictureUrl"
:type="'stationPictureUrl'"
/>
</el-form-item>
<el-form-item
label="护理站简介头像"
prop="stationIntroducePcitureUrl"
style="margin-left: 10%"
>
<stationAcatar
@imgUrl="imgUrl2"
:img="form.stationIntroducePcitureUrl"
:type="'stationIntroducePcitureUrl'"
/>
</el-form-item>
<el-form-item
label="护理站标签信息"
required
label-width="130px"
style="margin-left: 0px"
>
<el-table
ref="looknurseStationLabel"
:data="looknurseStationLabel"
style="margin-top: 50px"
>
<el-table-column label="标签名称" width="190" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.labelDescription"
maxlength="40"
></el-input>
</template>
</el-table-column>
<el-table-column label="排序" width="200" align="center">
<template slot-scope="scope">
<el-input
v-model="scope.row.labelSort"
placeholder="排序不可输入小数点"
type="number"
min="0"
oninput="if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+0)} if(value.length>10){value=value.slice(0,10)}"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="120">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="addnurseStationLabelList"
>新增</el-button
>
<el-button
size="mini"
type="text"
@click="delnurseStationLabelList(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- //导入 -->
<el-dialog
:title="upload.title"
:visible.sync="upload.open"
width="400px"
append-to-body
>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link
type="primary"
:underline="false"
style="font-size: 12px; vertical-align: baseline"
@click="importTemplate"
>下载模板</el-link
>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="upload.open = false"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listStation,
getStation,
delStation,
addStation,
updateStation,
getFirstLevelInfo,
getSecondaryLevelInfo,
getInfoLists,
updatePicture,
} from "@/api/system/station";
import { getInfoList } from "@/api/system/nurseItem";
import stationAcatar from "../stationAvatar/index.vue";
import { getListByUser } from "@/api/system/userlist.js";
import { getToken } from "@/utils/auth";
import editor from "@/components/Editor";
export default {
components: { stationAcatar, editor },
name: "Station",
data() {
var checkMobile = (rule, value, cb) => {
// 验证手机号的正则表达式
const regMobile =
/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/;
if (regMobile.test(value)) {
return cb();
}
cb(new Error("请输入正确的联系电话"));
};
// 验证手机号的规则
var checkMobile2 = (rule, value, cb) => {
// 验证手机号的正则表达式
const regMobile =
/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57]|19[0-9])[0-9]{8}$/;
if (!value) {
//所以当没有值的时候我们直接callback让他不校验直接执行下一步
return cb();
} else {
if (regMobile.test(value)) {
return cb();
} else {
cb(new Error("请输入正确的联系电话"));
}
}
};
return {
imageUrl: "",
imageUrl2: "",
imgtwo: "",
imgone: "",
handstationlist: [], //页面搜索list
// 用户导入参数
upload: {
// 是否显示弹出层(用户导入)
open: false,
// 弹出层标题(用户导入)
title: "",
// 是否禁用上传
isUploading: false,
// 设置上传的请求头部
headers: { Authorization: "Bearer " + getToken() },
// 上传的地址
url:
process.env.VUE_APP_BASE_API +
"/system/station/insertNurseStationImportList",
},
//护理类型
nurseTypeCode: "nurse_type_code",
nurseStationTypelist: [],
nurseStationType2: null,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
total2: 0,
//所属护理类型
typelooks: [],
//所属标签
looknurseStationLabel: [
{
labelDescription: "",
sort: "",
ids: 1,
},
],
// 护理站信息表格数据
stationList: [
{
sysAreaVOList: [
{
provinceName: null,
cityName: null,
streetName: null,
},
],
},
],
nurseStationlist: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
typeopen: false,
nurseStationLabelopen: false,
//权限查询
getListByUserquery: {
pageNum: 1,
pageSize: 10,
},
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
areaCode: null,
userId: null,
nurseStationCode: null,
nurseStationName: null,
id: null,
nurseStationType: null,
agencyIntroduce: null,
nurseStationDescription: null,
longitude: null,
latitude: null,
phone: null,
address: null,
dutyPerson: null,
dutyPhone: null,
stationPictureUrl: null,
sort: null,
},
// 表单参数
form: {},
ids: 1,
provincelist: [],
arealist: [],
citylist: [],
streetlist: [],
resid: null,
// 表单校验
rules: {
agencyIntroduce: [
{ required: true, message: "请输入护理站简介", trigger: "blur" },
],
stationIntroducePcitureUrl: [
{ required: true, message: "请上传护理站简介头像", trigger: "blur" },
],
stationPictureUrl: [
{ required: true, message: "请上传护理站头像", trigger: "blur" },
],
nurseStationDescription: [
{ required: true, message: "护理站总概述不能为空", trigger: "blur" },
],
phone: [
{
required: true,
validator: checkMobile,
trigger: "blur",
message: "",
},
],
dutyPhone: [
{
validator: checkMobile2,
trigger: "blur",
message: "",
},
],
sort: [{ required: true, message: "排序不能为空", trigger: "blur" }],
address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
longitude: [
{ required: true, message: "经度不能为空", trigger: "blur" },
],
latitude: [
{ required: true, message: "纬度不能为空", trigger: "blur" },
],
areaCode: [
{ required: true, message: "所属区域不能为空", trigger: "blur" },
],
nurseStationName: [
{ required: true, message: "护理站名称不能为空", trigger: "blur" },
],
nurseStationType: [
{ required: true, message: "请选择护理站类型", trigger: "blur" },
],
},
};
},
created() {
this.getList();
this.getaddress();
this.info();
this.infos();
},
methods: {
imgUrl(imgUrl) {
this.form.stationPictureUrl = imgUrl;
},
imgUrl2(imgUrl) {
this.form.stationIntroducePcitureUrl = imgUrl;
},
delnurseStationLabelList(index, item) {
console.log(index, item);
console.log();
// this.looknurseStationLabel.splice(index,1)
if (this.looknurseStationLabel.length === 1) {
this.looknurseStationLabel = [
{
labelDescription: "",
sort: "",
ids: 1,
},
];
} else {
this.looknurseStationLabel.splice(index, 1);
}
console.log(this.form.nurseStationLabelList);
},
addnurseStationLabelList() {
if (this.looknurseStationLabel.length == 5) {
this.$message.error("最多只能5条");
} else {
this.ids++;
var obj = {
labelDescription: "",
sort: "",
ids: this.ids,
};
this.looknurseStationLabel.push(obj);
}
console.log(this.looknurseStationLabel);
},
//点击街道
clickstreet(item) {
this.form.areaCode = item.areaCode;
console.log(item, this.form);
},
//点击区县城
clickarea(item) {
this.form.areaCode = "";
this.form.streetCode = "";
getSecondaryLevelInfo(item.id).then((res) => {
this.streetlist = res.data;
});
},
//点击市
clickcity(item) {
this.form.regionName = "";
this.form.areaCode = "";
this.form.streetCode = "";
getSecondaryLevelInfo(item.id).then((res) => {
this.arealist = res.data;
});
},
//点击省
province(item) {
this.form.cityName = "";
this.form.regionName = "";
this.form.areaCode = "";
this.form.streetCode = "";
getSecondaryLevelInfo(item.id).then((res) => {
this.citylist = res.data;
});
},
/** 查询护理站信息列表 */
getaddress() {
getFirstLevelInfo().then((res) => {
this.provincelist = res.data;
});
},
getList() {
this.liststationinfo();
this.loading = true;
},
// 取消按钮
cancel() {
var obj = { pictureUrlList: [] };
if (this.imgone != this.form.stationIntroducePcitureUrl) {
obj.pictureUrlList.push(this.form.stationIntroducePcitureUrl);
}
if (this.imgtwo != this.form.stationPictureUrl) {
obj.pictureUrlList.push(this.form.stationPictureUrl);
}
if (obj.pictureUrlList.length > 0) {
updatePicture(obj).then((res) => {});
}
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.nurseStationType2 = [];
this.form = {
id: null,
areaCode: null,
nurseStationCode: null,
nurseStationName: null,
nurseStationType: null,
agencyIntroduce: null,
nurseStationDescription: null,
longitude: null,
latitude: null,
phone: null,
address: null,
dutyPerson: null,
dutyPhone: null,
stationPictureUrl: null,
stationIntroducePcitureUrl: null,
sort: null,
nurseStationLabelList: [],
streetCode: null,
};
this.resetForm("form");
},
/** 搜索按钮操作 */
liststationinfo() {
this.loading = true;
listStation(this.queryParams).then((response) => {
this.stationList = response.rows;
this.total = response.total;
this.loading = false;
});
},
handleQuery() {
this.loading = true;
this.queryParams.pageNum = 1;
this.liststationinfo();
},
/** 重置按钮操作 */
resetQuery() {
if (this.nurseStationlist[0].isAdmin == "1") {
this.queryParams = {
pageNum: 1,
pageSize: 10,
areaCode: null,
userId: null,
nurseStationCode: null,
nurseStationName: null,
nurseStationType: null,
agencyIntroduce: null,
nurseStationDescription: null,
longitude: null,
latitude: null,
phone: null,
address: null,
dutyPerson: null,
dutyPhone: null,
stationPictureUrl: null,
sort: null,
};
this.resetForm("queryForm");
this.handleQuery();
} else {
// console.log(1);
this.queryParams.pageSize = 10;
this.queryParams.pageNum = 1;
this.queryParams.nurseStationCode = null;
this.handleQuery();
}
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.looknurseStationLabel = [
{
labelDescription: "",
sort: "",
ids: 1,
},
];
this.title = "添加护理站信息";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.loading = true;
const id = row.id || this.ids;
getStation(id).then((response) => {
this.form = response.data;
this.form.streetCode = this.form.streetName;
this.imgone = this.form.stationIntroducePcitureUrl;
this.imgtwo = this.form.stationPictureUrl;
this.looknurseStationLabel = response.data.nurseStationLabel;
this.open = true;
this.loading = false;
console.log(this.form);
});
},
/** 提交按钮 */
submitForm() {
this.form.nurseStationLabelList = this.looknurseStationLabel;
this.form.nurseStationType = this.nurseStationType2;
console.log(this.form);
this.$refs["form"].validate((valid) => {
if (valid) {
this.form.areaCode = Number(this.form.areaCode);
this.form.nurseStationType = this.nurseStationType2.join(",");
if (this.form.id != null) {
updateStation(this.form).then((response) => {
var obj = { pictureUrlList: [] };
if (this.imgone != this.form.stationIntroducePcitureUrl) {
obj.pictureUrlList.push(this.imgone);
}
if (this.imgtwo != this.form.stationPictureUrl) {
obj.pictureUrlList.push(this.imgtwo);
}
if (obj.pictureUrlList.length > 0) {
updatePicture(obj).then((res) => {});
}
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addStation(this.form).then((response) => {
if (response.code) {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
} else {
this.form.nurseStationType = obj;
}
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm("是否确认删除此护理站信息?")
.then(function () {
return delStation(ids);
})
.then(() => {
var obj = { pictureUrlList: [] };
obj.pictureUrlList.push(row.stationIntroducePcitureUrl);
obj.pictureUrlList.push(row.stationPictureUrl);
if (obj.pictureUrlList.length > 0) {
updatePicture(obj).then((res) => {});
}
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/** 导出按钮操作 */
handleExport() {
this.download(
"system/station/export",
{
...this.queryParams,
},
`station_${new Date().getTime()}.xlsx`
);
},
/** 导入按钮操作 */
handledata() {
this.upload.title = "护理站信息导入";
this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
this.download(
"/system/station/downloadTemplate?fileType=nurseStation",
{},
`护理站信息导入模板.xlsx`
);
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
this.upload.open = false;
this.upload.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert(
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
response.msg +
"</div>",
"导入结果",
{ dangerouslyUseHTMLString: true }
);
this.getList();
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.upload.isUploading = true;
},
//权限列表
info() {
getListByUser(this.getListByUserquery).then((res) => {
if (res.rows[0].isAdmin == "1") {
this.nurseStationlist = res.rows;
this.total2 = res.total;
} else {
this.total2 = res.total;
this.nurseStationlist = res.rows;
this.queryParams.id = res.rows[0].id;
this.handleQuery();
}
});
},
infos() {
var queryFor = {
pageNum: 1,
pageSize:9999,
};
getListByUser(queryFor).then((res) => {
console.log(res)
this.handstationlist = res.rows;
});
},
},
};
</script>