form渲染问题

shuishen

2024-01-23 cd11fbba0c9cb0745de0dd46f7017a626b19b3d9

form渲染问题

 src/views/place/components/baseAllInfo.vue

@@ -1,15 +1,12 @@
<template>
    <el-dialog class="place-info-box" title="场所维护" append-to-body :visible.sync="roleBox" center @close="roleBoxClose">

        <div class="cur-container-box" v-if="roleBox">

        <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" :key="reload"></avue-form>
                <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>
                <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"
@@ -18,7 +15,6 @@
                    @current-change="holdCurrentChange" @size-change="holdSizeChange" @refresh-change="refreshHoldChange"
                    @on-load="holdOnLoad">
                </avue-crud>

            </div>

            <div class="footer-btn-box">
@@ -26,9 +22,7 @@

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

        </div>

    </el-dialog>
</template>

@@ -36,28 +30,25 @@
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('手机号格式有误！'))
                    callback(new Error("手机号格式有误！"))
                } else {
                    callback()
                }
@@ -66,8 +57,9 @@
        }

        return {
            reload: Math.random(),
            roleBox: false,
            baseShow: false,
            restShow: false,

            placeExt: [],

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


                    {
                        width: 160,
@@ -95,10 +88,10 @@
                        slot: true,
                        label: "地址",
                        prop: "location",
                        type: 'map',
                        type: "map",
                        dataType: "string",
                        span: 12,
                        value: [117.966460, 28.431002, ""],
                        value: [117.96646, 28.431002, ""],
                        rules: [
                            {
                                required: true,
@@ -111,11 +104,13 @@
                    {
                        label: "负责人",
                        prop: "principal",
                        rules: [{
                            required: false,
                            message: "请输入负责人",
                            trigger: "blur",
                        }],
                        rules: [
                            {
                                required: false,
                                message: "请输入负责人",
                                trigger: "blur",
                            },
                        ],
                    },

                    {
@@ -129,8 +124,8 @@
                        rules: [
                            {
                                validator: validatorPhone,
                                trigger: 'blur'
                            }
                                trigger: "blur",
                            },
                        ],
                    },

@@ -141,13 +136,15 @@
                        prop: "neiCode",
                        search: false,
                        type: "tree",
                        dataType: 'string',
                        dicUrl: "/api/blade-system/region/tree",
                        props: {
                            label: "name",
                            value: "id",
                        },
                        cascader: ["gridCode"],
                        // dicFormatter: (res) => {
                        //  return dsposeData(res.data)
                        // },
                        rules: [
                            {
                                required: true,
@@ -178,7 +175,6 @@
                        ],
                    },


                    {
                        span: 7,
                        label: "场所标签",
@@ -188,15 +184,17 @@
                        cascader: ["smallLabel"],
                        props: {
                            label: "categoryName",
                            value: "categoryNo"
                            value: "categoryNo",
                        },
                        dataType: "string",
                        hide: true,
                        rules: [{
                            required: true,
                            message: "请输入场所标签",
                            trigger: "blur",
                        },],
                        rules: [
                            {
                                required: true,
                                message: "请输入场所标签",
                                trigger: "blur",
                            },
                        ],
                    },
                    {
                        span: 5,
@@ -204,10 +202,11 @@
                        labelWidth: 20,
                        prop: "smallLabel",
                        type: "select",
                        dicUrl: "/api/blade-category/category/getCategory?parentNo={{label}}",
                        dicUrl:
                            "/api/blade-category/category/getCategory?parentNo={{label}}",
                        props: {
                            label: "categoryName",
                            value: "categoryNo"
                            value: "categoryNo",
                        },
                        dataType: "string",
                        hide: true,
@@ -220,19 +219,21 @@
                        type: "select",
                        dicData: [
                            {
                                label: '绿',
                                value: 'green'
                            }, {
                                label: '黄',
                                value: 'yellow'
                            }, {
                                label: '红',
                                value: 'red'
                            }
                                label: "绿",
                                value: "green",
                            },
                            {
                                label: "黄",
                                value: "yellow",
                            },
                            {
                                label: "红",
                                value: "red",
                            },
                        ],
                        props: {
                            label: "label",
                            value: "value"
                            value: "value",
                        },
                        hide: true,
                    },
@@ -248,12 +249,12 @@
                        action: "/api/blade-resource/oss/endpoint/put-file",
                        propsHttp: {
                            res: "data",
                            name: 'name',
                            name: "name",
                            url: "link",
                        },
                        span: 24,
                    },
                ]
                ],
            },

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

                    {
@@ -277,8 +278,8 @@
                        rules: [
                            {
                                validator: validatorPhone,
                                trigger: 'blur'
                            }
                                trigger: "blur",
                            },
                        ],
                    },

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

                ]
                ],
            },

            loading: true,
@@ -352,8 +352,8 @@
                        rules: [
                            {
                                validator: validatorPhone,
                                trigger: 'blur'
                            }
                                trigger: "blur",
                            },
                        ],
                    },

@@ -362,7 +362,8 @@
                        prop: "tempAddress",
                        searchSpan: 4,
                        search: true,
                    },]
                    },
                ],
            },
            holdPage: {
                pageSize: 20,
@@ -370,7 +371,6 @@
                total: 0,
            },
            houseHoldForm: {},

        }
    },

@@ -384,65 +384,93 @@
        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.$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(',')
                }
                        if (that.form.imageUrls && that.form.imageUrls.length) {
                            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 => {
                        return item.type == 2
                        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) => {
                                return item.type == 3
                            })

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

                        that.baseShow = true

                        const data = restInfo.data.data

                        if (data) {
                            let imageUrls = data.imageUrls
                            let planImageUrls = data.planImageUrls

                            if (imageUrls && imageUrls.length) {
                                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(",")
                            }

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

                        that.restShow = true
                    })

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

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

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

                const data = restInfo.data.data

                if (data) {
                    let imageUrls = data.imageUrls
                    let planImageUrls = data.planImageUrls

                    if (imageUrls && imageUrls.length) {
                        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(",")
                    }

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

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

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

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

        holdOnLoad (holdPage, params = {}) {

            if (!this.curRow.id) return

            let values = {
                ...params,
                placeId: this.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) {
@@ -544,8 +573,8 @@
        desposeImage (data) {
            if (data.length > 0) {
                var urls = []
                var split = data.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])
                })
@@ -562,44 +591,50 @@
            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,
                            imageUrls: placeImages,
                            planImageUrls: placePlanImageUrls
                        })
                    ]).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.roleBoxClose()
                                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
                }
            })
@@ -611,9 +646,10 @@

            this.$refs.baseForm && this.$refs.baseForm.resetForm()
            this.$refs.restForm && this.$refs.restForm.resetForm()

            this.baseShow = false
            this.restShow = false
            this.roleBox = false
        }
        },
    },
}
</script>

 src/views/property/propertyCompany.vue

@@ -191,12 +191,11 @@
              label: "社会信用代码",
              prop: "socialCreditCode",
              searchSpan: 5,
              // searchLabelWidth: 124,
              searchLabelWidth: 124,
              search: true,
              span: 18,
              row: true,
              width: 100,

            },
            {
              label: "基础信息分",

 src/views/userHouse/houseHoldList.vue

@@ -7,8 +7,8 @@
                    @row-save="rowSave" :before-open="beforeOpen" :page.sync="page" @search-change="searchChange"
                    @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
                    @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
                    <template slot="menuLeft">
                        <el-button type="danger" size="small" plain icon="el-icon-delete" v-if="permission.household_delete"
                    <!-- <template slot="menuLeft"> -->
                    <!-- <el-button type="danger" size="small" plain icon="el-icon-delete" v-if="permission.household_delete"
                            @click="handleDelete">删 除
                        </el-button>
                        <el-button type="success" size="small" plain v-if="permission.household_import"
@@ -16,8 +16,8 @@
                        </el-button>
                        <el-button type="warning" size="small" plain v-if="permission.household_export"
                            icon="el-icon-download" @click="handleExport">导出
                        </el-button>
                    </template>
                        </el-button> -->
                    <!-- </template> -->

                    <template slot-scope="{row, size}" slot="menu">
                        <el-button :size="size" type="text" icon="el-icon-circle-plus-outline"

 src/views/userHouse/houseList.vue

@@ -7,30 +7,30 @@
                    @row-save="rowSave" :before-open="beforeOpen" :page.sync="page" @search-change="searchChange"
                    @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
                    @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
                    <template slot="menuLeft">
                        <el-button type="danger" size="small" plain icon="el-icon-delete" v-if="permission.house_del"
                    <!-- <template slot="menuLeft"> -->
                    <!-- <el-button type="danger" size="small" plain icon="el-icon-delete" v-if="permission.house_del"
                            @click="handleDelete">删 除
                        </el-button>
                        <!-- <el-button type="success" size="small" plain v-if="userInfo.role_name.includes('admin')"
                        </el-button> -->
                    <!-- <el-button type="success" size="small" plain v-if="userInfo.role_name.includes('admin')"
                            icon="el-icon-upload2" @click="handleImport">导入
                        </el-button>
                        <el-button type="warning" size="small" plain v-if="userInfo.role_name.includes('admin')"
                            icon="el-icon-download" @click="handleExport">导出
                        </el-button> -->
                        <el-button type="success" size="small" plain v-if="permission.house_import"
                    <!-- <el-button type="success" size="small" plain v-if="permission.house_import"
                            icon="el-icon-upload2" @click="handleImport">导入
                        </el-button>
                        <el-button type="warning" size="small" plain v-if="permission.house_export"
                            icon="el-icon-download" @click="handleExport">导出
                        </el-button>
                    </template>
                        </el-button> -->
                    <!-- </template> -->

                    <template slot-scope="{row, size}" slot="menu">
                        <el-button :size="size" type="text" icon="el-icon-circle-plus-outline"
                            v-if="permission.house_manager" @click="handleHouseholdManager(row)">住户管理
                        </el-button>
                        <el-button :size="size" type="text" icon="el-icon-circle-plus-outline"
                            v-if="permission.house_tag" @click="manageLabel(row)">标签
                        <el-button :size="size" type="text" icon="el-icon-circle-plus-outline" v-if="permission.house_tag"
                            @click="manageLabel(row)">标签
                        </el-button>
                    </template>