NurseStationOperateUI/src/views/system/station/stationjs.js

import {
    listStation,
    getStation,
    delStation,
    addStation,
    updateStation,
    getFirstLevelInfo,
    getSecondaryLevelInfo,
    updatePicture,
} from "@/api/system/station";
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 {
            imgsurl: { pictureUrlList: [] },
            imageUrl: "",
            imageUrl2: "",
            imgtwo: "",
            imgone: "",
            // 用户导入参数
            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,
            // 总条数
            total2: 0,
            //所属标签
            looknurseStationLabel: [{
                labelDescription: "",
                sort: "",
                idd: 1,
            }, ],
            // 护理站信息表格数据
            stationList: [{
                sysAreaVOList: [{
                    provinceName: null,
                    cityName: null,
                    streetName: null,
                }, ],
            }, ],
            nurseStationlist: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            //权限查询
            getListByUserquery: {
                pageNum: 1,
                pageSize: 10,
            },
            // 表单参数
            form: {},
            idd: 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.getaddress();
        this.info();
    },
    methods: {
        imgs(item) {
            this.imgsurl.pictureUrlList.push(item);
        },
        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: "",
                    idd: 1,
                }, ];
            } else {
                this.looknurseStationLabel.splice(index, 1);
            }

            console.log(this.form.nurseStationLabelList);
        },
        addnurseStationLabelList() {
            if (this.looknurseStationLabel.length == 5) {
                this.$message.error("最多只能5条");
            } else {
                this.idd++;
                var obj = {
                    labelDescription: "",
                    sort: "",
                    idd: this.idd,
                };
                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.info();
        },
        // 取消按钮
        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) => {});
            }
            if (this.imgsurl.pictureUrlList.length > 0) {
                updatePicture(this.imgsurl).then((res) => {});
            }
            this.imgsurl = { pictureUrlList: [] };
            this.open = false;
            this.reset();
            this.arealist = []
            this.citylist = []
            this.streetlist = []
        },
        // 表单重置
        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");
        },
        //护理站列表
        info() {
            this.loading = true
            getListByUser(this.getListByUserquery).then((res) => {
                this.nurseStationlist = res.rows;
                this.total2 = res.total;
                this.loading = false
            });
        },
        handleQuery() {
            this.loading = true;
            this.getListByUserquery.pageNum = 1;
            this.info();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.getListByUserquery = {
                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();
        },
        // 多选框选中数据
        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: "",
                idd: 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);
                            }
                            this.imgsurl = { pictureUrlList: [] };
                            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.getListByUserquery,
                },
                `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;
        },
    },
};