居民监管样式调整

shuishen

2024-01-24 d16d10d94fddff86bdfd87113e7fd2cebe8b7cd7

 src/views/place/components/baseAllInfo.vue

@@ -1,49 +1,66 @@
<template>
    <div class="cur-container-box">
        <div class="content-box">
            <box-title class="m10" :classVal="9" :title="'基本信息'"></box-title>
            <avue-form ref="baseForm" :option="option" v-model="form"></avue-form>
    <el-dialog class="place-info-box" title="场所维护" append-to-body :visible.sync="roleBox" center @close="roleBoxClose">
        <div class="cur-container-box">
            <div class="content-box">
                <box-title class="m10" :classVal="9" :title="'基本信息'"></box-title>
                <avue-form v-if="baseShow" ref="baseForm" :option="option" v-model="form"></avue-form>

            <box-title class="m10" :classVal="9" :title="'其他信息'"></box-title>
            <avue-form ref="restForm" :option="optionDetail" v-model="placeForm"></avue-form>
                <box-title class="m10" :classVal="9" :title="'其他信息'"></box-title>
                <avue-form v-if="restShow" ref="restForm" :option="optionDetail" v-model="placeForm"></avue-form>

            <box-title class="m10" :classVal="9" :title="'从业人员'"></box-title>
            <avue-crud :option="placeOption" :table-loading="loading" :data="placeExt" ref="crud" v-model="houseHoldForm"
                :permission="permissionList" @row-del="houseHoldRowDel" @row-update="houseHoldRowUpdate"
                @row-save="houseHoldRowSave" :page.sync="holdPage" @current-change="holdCurrentChange"
                @size-change="holdSizeChange" @refresh-change="refreshHoldChange" @on-load="holdOnLoad">
            </avue-crud>
                <box-title class="m10" :classVal="9" :title="'从业人员'"></box-title>
                <avue-crud :option="placeOption" :table-loading="loading" :data="placeExt" ref="crud"
                    v-model="houseHoldForm" :permission="permissionList" @row-del="houseHoldRowDel"
                    @row-update="houseHoldRowUpdate" @row-save="houseHoldRowSave" :page.sync="holdPage"
                    @current-change="holdCurrentChange" @size-change="holdSizeChange" @refresh-change="refreshHoldChange"
                    @on-load="holdOnLoad">
                </avue-crud>
            </div>

            <div class="footer-btn-box">
                <el-button size="small" type="primary" @click="dataUpdate">保 存</el-button>

                <el-button size="small" @click="roleBoxClose">关 闭</el-button>
            </div>
        </div>

        <div class="footer-btn-box">
            <el-button size="small" type="primary" @click="dataUpdate">保 存</el-button>

            <el-button size="small" @click="closeRowDetails">关 闭</el-button>
        </div>
    </div>
    </el-dialog>
</template>

<script>
import {
    getPlace,
    getPlaceExt,

    holdRemove,
    holdAdd,
    holdUpdate,
    getHoldList,

    update,
    updatePlaceExt,
} from "@/api/place/place"

import website from '@/config/website'
import website from "@/config/website"

import boxTitle from './boxTitle'
import boxTitle from "./boxTitle"

export default {
    data () {
        //手机号格式校验
        let validatorPhone = function (rule, value, callback) {
            if (value) {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                    callback(new Error("手机号格式有误！"))
                } else {
                    callback()
                }
            }
            callback()
        }

        return {
            roleBox: false,
            baseShow: false,
            restShow: false,

            placeExt: [],

            form: {},
@@ -56,64 +73,60 @@
                        span: 12,
                        label: "场所名称",
                        prop: "placeName",
                        rules: [{
                            required: true,
                            message: "请输入场所名称",
                            trigger: "blur",
                        }],
                        rules: [
                            {
                                required: true,
                                message: "请输入场所名称",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        span: 7,
                        label: "场所标签",
                        prop: "label",
                        type: "cascader",
                        dicUrl: "/api/blade-category/category/getCategory?level=2",
                        cascader: ["smallLabel"],
                        props: {
                            label: "categoryName",
                            value: "categoryNo"
                        },
                        width: 160,
                        overHidden: true,
                        slot: true,
                        label: "地址",
                        prop: "location",
                        type: "map",
                        dataType: "string",
                        hide: true,
                        rules: [{
                            required: true,
                            message: "请输入场所标签",
                            trigger: "blur",
                        },],
                    },
                    {
                        span: 5,
                        label: "",
                        labelWidth: 20,
                        prop: "smallLabel",
                        type: "cascader",
                        dicUrl: "/api/blade-category/category/getCategory?parentNo={{label}}",
                        props: {
                            label: "categoryName",
                            value: "categoryNo"
                        },
                        dataType: "string",
                        hide: true,
                        span: 12,
                        value: [117.96646, 28.431002, ""],
                        rules: [
                            {
                                required: true,
                                message: "请选择地址",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        label: "负责人",
                        prop: "principal",
                        rules: [{
                            required: false,
                            message: "请输入负责人",
                            trigger: "blur",
                        }],
                        rules: [
                            {
                                required: false,
                                message: "请输入负责人",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        width: 110,
                        label: "电话",
                        width: 96,
                        label: "手机号码",
                        prop: "principalPhone",
                        search: true,
                        searchSpan: 4,
                        slot: true,
                        overHidden: true,
                        rules: [
                            {
                                validator: validatorPhone,
                                trigger: "blur",
                            },
                        ],
                    },

                    {
@@ -122,14 +135,16 @@
                        label: "所属社区",
                        prop: "neiCode",
                        search: false,
                        width: 150,
                        type: "tree",
                        dicUrl: "/api/blade-system/region/tree",
                        props: {
                            label: "name",
                            value: "id",
                        },
                        cascader: ["gridId"],
                        cascader: ["gridCode"],
                        // dicFormatter: (res) => {
                        //  return dsposeData(res.data)
                        // },
                        rules: [
                            {
                                required: true,
@@ -141,13 +156,14 @@
                    {
                        hide: true,
                        label: "所属网格",
                        prop: "gridId",
                        prop: "gridCode",
                        type: "tree",
                        cell: true,
                        props: {
                            label: "gridName",
                            value: "id",
                            value: "gridCode",
                        },
                        // dataType: 'string',
                        dicUrl:
                            "/api/blade-grid/grid/getGridList?communityCode={{neiCode}}",
                        rules: [
@@ -157,6 +173,69 @@
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        span: 7,
                        label: "场所标签",
                        prop: "label",
                        type: "select",
                        dicUrl: "/api/blade-category/category/getCategory?level=2",
                        cascader: ["smallLabel"],
                        props: {
                            label: "categoryName",
                            value: "categoryNo",
                        },
                        dataType: "string",
                        hide: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入场所标签",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        span: 5,
                        label: "",
                        labelWidth: 20,
                        prop: "smallLabel",
                        type: "select",
                        dicUrl:
                            "/api/blade-category/category/getCategory?parentNo={{label}}",
                        props: {
                            label: "categoryName",
                            value: "categoryNo",
                        },
                        dataType: "string",
                        hide: true,
                    },

                    {
                        span: 12,
                        label: "标签颜色",
                        prop: "color",
                        type: "select",
                        dicData: [
                            {
                                label: "绿",
                                value: "green",
                            },
                            {
                                label: "黄",
                                value: "yellow",
                            },
                            {
                                label: "红",
                                value: "red",
                            },
                        ],
                        props: {
                            label: "label",
                            value: "value",
                        },
                        hide: true,
                    },

                    {
@@ -170,31 +249,12 @@
                        action: "/api/blade-resource/oss/endpoint/put-file",
                        propsHttp: {
                            res: "data",
                            name: 'name',
                            name: "name",
                            url: "link",
                        },
                        span: 24,
                    },

                    {
                        width: 160,
                        overHidden: true,
                        slot: true,
                        label: "位置",
                        prop: "location",
                        type: 'map',
                        dataType: "string",
                        span: 24,
                        value: [117.966460, 28.431002, ""],
                        rules: [
                            {
                                required: true,
                                message: "请选择位置",
                                trigger: "blur",
                            },
                        ],
                    },
                ]
                ],
            },

            placeForm: {},
@@ -203,12 +263,24 @@
                emptyBtn: false,
                column: [
                    {
                        label: '法人信息',
                        prop: 'legalPerson'
                        label: "法人信息",
                        prop: "legalPerson",
                    },

                    {
                        label: '法人电话',
                        prop: 'legalTel'
                        width: 96,
                        label: "法人电话",
                        prop: "legalTel",
                        search: true,
                        searchSpan: 4,
                        slot: true,
                        overHidden: true,
                        rules: [
                            {
                                validator: validatorPhone,
                                trigger: "blur",
                            },
                        ],
                    },

                    {
@@ -222,7 +294,7 @@
                        action: "/api/blade-resource/oss/endpoint/put-file",
                        propsHttp: {
                            res: "data",
                            name: 'name',
                            name: "name",
                            url: "link",
                        },
                        span: 24,
@@ -239,13 +311,12 @@
                        action: "/api/blade-resource/oss/endpoint/put-file",
                        propsHttp: {
                            res: "data",
                            name: 'name',
                            name: "name",
                            url: "link",
                        },
                        span: 24,
                    },

                ]
                ],
            },

            loading: true,
@@ -262,22 +333,37 @@
                border: true,
                index: true,
                dialogClickModal: false,
                column: [{
                    label: "名称",
                    prop: "name",
                    searchSpan: 4,
                    search: true,
                }, {
                    label: "电话",
                    prop: "telephone",
                    searchSpan: 4,
                    search: true,
                }, {
                    label: "暂住地",
                    prop: "tempAddress",
                    searchSpan: 4,
                    search: true,
                },]
                column: [
                    {
                        label: "名称",
                        prop: "name",
                        searchSpan: 4,
                        search: true,
                    },

                    {
                        width: 96,
                        label: "手机号码",
                        prop: "telephone",
                        search: true,
                        searchSpan: 4,
                        slot: true,
                        overHidden: true,
                        rules: [
                            {
                                validator: validatorPhone,
                                trigger: "blur",
                            },
                        ],
                    },

                    {
                        label: "暂住地",
                        prop: "tempAddress",
                        searchSpan: 4,
                        search: true,
                    },
                ],
            },
            holdPage: {
                pageSize: 20,
@@ -292,37 +378,57 @@

    inject: ["placeElement"],

    watch: {
        'placeElement.curRow': {
            handler (newData) {
                const that = this
                if (newData && 'id' in newData && newData['id'] != null && newData['id'] != '') {
    watch: {},

                    that.$axios.all([
                        getPlace(newData['id']),
                        getPlaceExt({ placeId: newData['id'] }),
                    ]).then(that.$axios.spread(function (baseInfo, restInfo) {
    methods: {
        initOpen (newData) {
            this.curRow = newData
            this.roleBox = true
            this.baseShow = false
            this.restShow = false
            this.form = {}
            this.placeForm = {}

            const that = this

            that.$axios
                .all([getPlace(newData["id"]), getPlaceExt({ placeId: newData["id"] })])
                .then(
                    that.$axios.spread(function (baseInfo, restInfo) {
                        that.form = baseInfo.data.data

                        that.form.location = [that.form.lng, that.form.lat, that.form.location].join(',')
                        that.form.location = [
                            that.form.lng,
                            that.form.lat,
                            that.form.location,
                        ].join(",")

                        if (that.form.imageUrls && that.form.imageUrls.length) {
                            that.form.imageUrls = that.form.imageUrls.split(",").filter(item => item != '').map(item => website.minioUrl + item).join(',')
                            that.form.imageUrls = that.form.imageUrls
                                .split(",")
                                .filter((item) => item != "")
                                .map((item) => website.minioUrl + item)
                                .join(",")
                        }

                        if (that.form.placePoiLabelVOList && that.form.placePoiLabelVOList.length) {
                            let lebelTwo = that.form.placePoiLabelVOList.find(item => {
                        if (
                            that.form.placePoiLabelVOList &&
                            that.form.placePoiLabelVOList.length
                        ) {
                            let lebelTwo = that.form.placePoiLabelVOList.find((item) => {
                                return item.type == 2
                            })

                            if (lebelTwo) that.form.label = String(lebelTwo.poiCode)

                            let lebelThree = that.form.placePoiLabelVOList.find(item => {
                            let lebelThree = that.form.placePoiLabelVOList.find((item) => {
                                return item.type == 3
                            })

                            if (lebelThree) that.form.smallLabel = String(lebelThree.poiCode)
                        }

                        that.baseShow = true

                        const data = restInfo.data.data

@@ -331,37 +437,40 @@
                            let planImageUrls = data.planImageUrls

                            if (imageUrls && imageUrls.length) {
                                imageUrls = imageUrls.split(',').filter(item => item != '').map(item => website.minioUrl + item).join(",")
                                imageUrls = imageUrls
                                    .split(",")
                                    .filter((item) => item != "")
                                    .map((item) => website.minioUrl + item)
                                    .join(",")
                            }

                            if (planImageUrls && planImageUrls.length) {
                                planImageUrls = planImageUrls.split(',').filter(item => item != '').map(item => website.minioUrl + item).join(",")
                                planImageUrls = planImageUrls
                                    .split(",")
                                    .filter((item) => item != "")
                                    .map((item) => website.minioUrl + item)
                                    .join(",")
                            }

                            that.placeForm = {
                                ...data,
                                imageUrls,
                                planImageUrls
                                planImageUrls,
                            }
                        }

                    }))
                        that.restShow = true
                    })
                )
        },

                    that.holdOnLoad(this.holdPage)
                }
            },
            immediate: true
        }
    },

    methods: {
        locationDispose (data) {
            data = data.split(',')
            data = data.split(",")

            return {
                longitude: data[0],
                latitude: data[1],
                location: data[2]
                location: data[2],
            }
        },

@@ -410,7 +519,7 @@
        houseHoldRowSave (row, done, loading) {
            holdAdd({
                ...row,
                placeId: this.placeElement.curRow.id
                placeId: this.curRow.id,
            }).then(
                () => {
                    this.holdOnLoad(this.holdPage)
@@ -433,22 +542,24 @@
        },

        holdOnLoad (holdPage, params = {}) {
            if (!this.placeElement.curRow.id) return
            if (!this.curRow.id) return

            let values = {
                ...params,
                placeId: this.placeElement.curRow.id
                placeId: this.curRow.id,
            }

            getHoldList(holdPage.currentPage, holdPage.pageSize, values).then((res) => {
                const data = res.data.data
            getHoldList(holdPage.currentPage, holdPage.pageSize, values).then(
                (res) => {
                    const data = res.data.data

                this.holdPage.total = data.total
                this.placeExt = data.records
                    this.holdPage.total = data.total
                    this.placeExt = data.records

                this.loading = false
                this.selectionClear()
            })
                    this.loading = false
                    this.selectionClear()
                }
            )
        },

        holdCurrentChange (currentPage) {
@@ -459,62 +570,86 @@
            this.holdPage.pageSize = pageSize
        },

        dataUpdate () {
            const that = this

            let imageUrls = this.form.imageUrls

            if (imageUrls.length > 0) {
        desposeImage (data) {
            if (data.length > 0) {
                var urls = []
                var split = imageUrls.split(",").filter(item => item != '')
                split.forEach(url => {
                var split = data.split(",").filter((item) => item != "")
                split.forEach((url) => {
                    var names = url.split("jczz/")
                    urls.push(names[1])
                })
                imageUrls = urls.join(",")
                data = urls.join(",")
            }

            return data
        },

        dataUpdate () {
            const that = this

            let imageUrls = this.desposeImage(this.form.imageUrls)
            let placeImages = this.desposeImage(this.placeForm.imageUrls)
            let placePlanImageUrls = this.desposeImage(this.placeForm.planImageUrls)

            let label = this.form.label

            if (this.form.smallLabel != '') {
                label = label + ',' + this.form.smallLabel
            if (this.form.smallLabel != "") {
                label = label + "," + this.form.smallLabel
            }

            delete this.form.smallLabel

            this.$refs.baseForm.validate((valid, done, msg) => {
                if (valid) {
                    that.$axios.all([
                        update({
                            // ...this.placeElement.curRow,
                            ...this.form,
                            imageUrls,
                            label,
                            ...this.locationDispose(this.form.location)
                        }),
                        updatePlaceExt(this.placeForm)
                    ]).then(that.$axios.spread(function () {
                        that.$message({
                            type: "success",
                            message: "操作成功!",
                        })
                    that.$axios
                        .all([
                            update({
                                // ...this.placeElement.curRow,
                                ...this.form,
                                imageUrls,
                                label,
                                ...this.locationDispose(this.form.location),
                            }),
                            updatePlaceExt({
                                ...this.placeForm,
                                imageUrls: placeImages,
                                planImageUrls: placePlanImageUrls,
                            }),
                        ])
                        .then(
                            that.$axios.spread(function () {
                                that.$message({
                                    type: "success",
                                    message: "操作成功!",
                                })

                        that.closeRowDetails()
                                that.roleBoxClose()

                        that.placeElement.onLoad(that.placeElement.page, that.placeElement.query)
                                that.placeElement.onLoad(
                                    that.placeElement.page,
                                    that.placeElement.query
                                )

                        done()
                    }))
                                done()
                            })
                        )
                } else {
                    console.log('error submit!!')
                    console.log("error submit!!")
                    return false
                }
            })
        },

        closeRowDetails () {
            this.placeElement.roleBox = false
        }
        roleBoxClose () {
            this.form = {}
            this.placeForm = {}

            this.$refs.baseForm && this.$refs.baseForm.resetForm()
            this.$refs.restForm && this.$refs.restForm.resetForm()
            this.baseShow = false
            this.restShow = false
            this.roleBox = false
        },
    },
}
</script>