shuishen
2023-10-31 ede069e621b90e53b4fcaf6486175689772ff87a
资料管理
2 files modified
1 files added
371 ■■■■■ changed files
components/my-components/selectBus.vue 205 ●●●●● patch | view | raw | blame | history
subPackage/house/member/index.vue 164 ●●●● patch | view | raw | blame | history
subPackage/house/roomControl/index.vue 2 ●●● patch | view | raw | blame | history
components/my-components/selectBus.vue
New file
@@ -0,0 +1,205 @@
<template>
    <view>
        <u-popup :closeOnClickOverlay="true" :show="show" @close="cancel">
            <view :style="{height}">
                <view class="title">{{popupTitle}}</view>
                <view style="padding: 20rpx;">
                    <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
                        @scrolltolower="$emit('lower')">
                        <!--单选-->
                        <u-radio-group v-if="type == 'radio'" :borderBottom="true" iconPlacement="right"
                            placement="column" @change="groupChange" :value="value">
                            <u-radio :customStyle="{marginBottom: '12px'}" v-for="(item, index) in dataLists"
                                :key="item.value" :label="item.name" :name="item.value">
                            </u-radio>
                        </u-radio-group>
                        <!--多选-->
                        <u-checkbox-group v-if="type == 'checkbox'" :borderBottom="true" placement="column"
                            iconPlacement="right" @change="checkboxChange" v-model="checkboxValue">
                            <u-checkbox :customStyle="{marginBottom: '12px',paddingBottom:'12px'}"
                                v-for="(item, index) in dataLists" :key="index" :label="item[name]" :name="index">
                            </u-checkbox>
                        </u-checkbox-group>
                    </scroll-view>
                    <u-gap height="45"></u-gap>
                    <view class="bottons">
                        <u-row>
                            <u-col customStyle="padding:0 20rpx 20rpx 10rpx" span="12">
                                <u-button @click="submit" type="primary" throttleTime="1000" :disabled="isDisabled">确认
                                </u-button>
                            </u-col>
                        </u-row>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>
<script>
    /**
     * 公共选择下拉框,基于uview。支持下拉加载、列表搜索、单选|多选
     * @author qianziyu
     * @description 弹出层选择器,基于uview中u-popup实现
     * @property {Array}            dataLists            数据列表
     * @property {String}            name                列表显示的字段名
     * @property {Boolean}            show                是否展示弹窗 (默认 false )
     * @property {String}            type                选择类型 单选|多选 (默认 单选 )
     * @property {Boolean}            showSearch            是否显示搜索框 (默认 true )
     * @property {String}            popupTitle            列表标题
     * @property {String}            placeholder            搜索框placeholder
     * @event {Function} search 搜索事件,返回keyword
     * @event {Function} lower 滑动到底部触发,用于下拉加载新数据
     * @event {Function} cancel 组件关闭事件
     * @event {Function} submit 提交按钮,返回选中的列表数据
     * @example <common-select :show="show" :popupTitle="popupTitle" @cancel="show=false" @search="selectSearch" name="cworkStationName" @submit="onsubmit"
            :dataLists="dataLists" placeholder="输入工站名称搜索"></common-select>
     */
    export default {
        name: "my-select",
        props: {
            dataLists: {
                default: {},
                type: Array
            },
            popupTitle: {
                default: '列表选择',
                type: String
            },
            show: {
                default: false,
                type: Boolean
            },
            height: {
                type: String,
                default: "100%"
            },
            name: {
                default: 'name',
            },
            type: {
                default: 'radio',
                type: String
            },
            showSearch: {
                default: true,
                type: Boolean
            },
            placeholder: {
                default: '请输入搜索内容'
            },
            value: {},
        },
        data() {
            return {
                keyword: '',
                scrollTop: 0,
                checkboxData: [],
                checkboxValue: [],
                radioData: {},
                radioValue: '',
                defaultValue: "",
            };
        },
        watch: {
            dataLists: {
                handler(newVal) {
                    if (newVal.length > 0) {
                        this.radioData = this.dataLists.filter(e => e.value == this.value)[0]
                    }
                },
                immediate: true,
                deep: true
            }
        },
        computed: {
            isDisabled() {
                if ((JSON.stringify(this.radioData) === '{}') && (this.checkboxData.length === 0)) {
                    return true
                } else {
                    return false
                }
            }
        },
        mounted() {
            this.defaultValue = this.value
        },
        options: {
            styleIsolation: 'shared'
        },
        methods: {
            checkboxChange(n) {
                this.checkboxData = []
                n.forEach(key => {
                    this.checkboxData.push(this.dataLists[key])
                })
            },
            //选择列表项触发
            groupChange(n) {
                // this.dataLists[n]
                this.radioData = this.dataLists.filter(v => v.value == n)[0]
                this.$emit("input", n)
            },
            //点击搜索触发
            search() {
                this.$emit('search', this.keyword)
            },
            //点击取消按钮触发
            cancel() {
                this.$emit("input", this.defaultValue)
                this.$emit('cancel')
            },
            //提交触发
            submit() {
                if (this.type == 'radio') {
                    if (JSON.stringify(this.radioData) == '{}') {
                        uni.$u.toast('请选择数据')
                        return;
                    }
                    this.$emit('submit', this.radioData)
                } else if (this.type == 'checkbox') {
                    if (this.checkboxData.length == 0) {
                        uni.$u.toast('请选择数据')
                        return;
                    }
                    this.$emit('submit', this.checkboxData)
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .u-popup {
        .title {
            border-bottom: 1px solid #f7f7f7;
            padding: 20rpx;
            text-align: center;
            font-weight: bold;
        }
    }
    .scroll-Y {
        height: 650rpx;
    }
    .bottons {
        background-color: white;
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
    }
</style>
subPackage/house/member/index.vue
@@ -7,17 +7,17 @@
                        <box-title title="基础信息"></box-title>
                    </view>
                    <view class="event-info">
                        <u-form-item @click="typeShow = true" class="form-item" labelWidth="100" label="角色" required
                            prop="type">
                            <u--input border="none" v-model="typeName" disabled disabledColor="#ffffff"
                        <u-form-item @click="showSelectBus(roleList, roleName, '角色', 'roleName')" class="form-item"
                            labelWidth="100" label="角色" required prop="type">
                            <u--input border="none" v-model="roleName" disabled disabledColor="#ffffff"
                                placeholder="请选择">
                            </u--input>
                            <u-icon slot="right" name="arrow-right"></u-icon>
                        </u-form-item>
                        <u-form-item @click="typeShow = true" class="form-item" labelWidth="100" label="角色关系" required
                            prop="type">
                            <u--input border="none" v-model="typeName" disabled disabledColor="#ffffff"
                        <u-form-item @click="showSelectBus(relationList, relationName, '角色关系', 'relationName')"
                            class="form-item" labelWidth="100" label="角色关系" required prop="type">
                            <u--input border="none" v-model="relationName" disabled disabledColor="#ffffff"
                                placeholder="请选择">
                            </u--input>
                            <u-icon slot="right" name="arrow-right"></u-icon>
@@ -36,7 +36,7 @@
                        <u-form-item @click="typeShow = true" class="form-item" labelWidth="100" label="性别" required
                            prop="type">
                            <u--input border="none" v-model="typeName" disabled disabledColor="#ffffff"
                            <u--input border="none" v-model="roleName" disabled disabledColor="#ffffff"
                                placeholder="请选择">
                            </u--input>
                            <u-icon slot="right" name="arrow-right"></u-icon>
@@ -54,7 +54,7 @@
                        <u-form-item @click="typeShow = true" class="form-item" labelWidth="100" label="是否主要联系人"
                            required prop="type">
                            <u--input border="none" v-model="typeName" disabled disabledColor="#ffffff"
                            <u--input border="none" v-model="roleName" disabled disabledColor="#ffffff"
                                placeholder="请选择">
                            </u--input>
                            <u-icon slot="right" name="arrow-right"></u-icon>
@@ -62,7 +62,7 @@
                        <u-form-item @click="typeShow = true" class="form-item" labelWidth="100" label="居住情况" required
                            prop="type">
                            <u--input border="none" v-model="typeName" disabled disabledColor="#ffffff"
                            <u--input border="none" v-model="roleName" disabled disabledColor="#ffffff"
                                placeholder="请选择">
                            </u--input>
                            <u-icon slot="right" name="arrow-right"></u-icon>
@@ -85,7 +85,7 @@
                        <u-form-item @click="typeShow = true" class="form-item" labelWidth="100" label="民族" required
                            prop="type">
                            <u--input border="none" v-model="typeName" disabled disabledColor="#ffffff"
                            <u--input border="none" v-model="roleName" disabled disabledColor="#ffffff"
                                placeholder="请选择">
                            </u--input>
                            <u-icon slot="right" name="arrow-right"></u-icon>
@@ -93,7 +93,7 @@
                        <u-form-item @click="typeShow = true" class="form-item" labelWidth="100" label="学历" required
                            prop="type">
                            <u--input border="none" v-model="typeName" disabled disabledColor="#ffffff"
                            <u--input border="none" v-model="roleName" disabled disabledColor="#ffffff"
                                placeholder="请选择">
                            </u--input>
                            <u-icon slot="right" name="arrow-right"></u-icon>
@@ -101,7 +101,7 @@
                        <u-form-item @click="typeShow = true" class="form-item" labelWidth="100" label="是否党员" required
                            prop="type">
                            <u--input border="none" v-model="typeName" disabled disabledColor="#ffffff"
                            <u--input border="none" v-model="roleName" disabled disabledColor="#ffffff"
                                placeholder="请选择">
                            </u--input>
                            <u-icon slot="right" name="arrow-right"></u-icon>
@@ -114,7 +114,7 @@
                        <u-form-item @click="typeShow = true" class="form-item" labelWidth="100" label="工作状态" required
                            prop="type">
                            <u--input border="none" v-model="typeName" disabled disabledColor="#ffffff"
                            <u--input border="none" v-model="roleName" disabled disabledColor="#ffffff"
                                placeholder="请选择">
                            </u--input>
                            <u-icon slot="right" name="arrow-right"></u-icon>
@@ -122,24 +122,24 @@
                        <u-form-item @click="typeShow = true" class="form-item" labelWidth="100" label="婚姻状态" required
                            prop="type">
                            <u--input border="none" v-model="typeName" disabled disabledColor="#ffffff"
                            <u--input border="none" v-model="roleName" disabled disabledColor="#ffffff"
                                placeholder="请选择">
                            </u--input>
                            <u-icon slot="right" name="arrow-right"></u-icon>
                        </u-form-item>
                        <u-form-item class="form-item" labelWidth="100" label="户籍登记地" required prop="location">
                            <u--input border="none" v-model="form.location" placeholder="请输入">
                            </u--input>
                        </u-form-item>
                        <u-form-item class="form-item" labelWidth="100" label="车牌号" required prop="location">
                            <u--input border="none" v-model="form.location" placeholder="请输入">
                            <u--input border="none" v-model="form.location" placeholder="多个用中划线(-)隔开">
                            </u--input>
                        </u-form-item>
                        <u-form-item class="form-item" labelWidth="100" label="备注" required prop="location">
                            <u--input border="none" v-model="form.location" placeholder="请输入">
                            <u--input border="none" v-model="form.location" placeholder="补充说明">
                            </u--input>
                        </u-form-item>
                    </view>
@@ -158,41 +158,129 @@
        <!-- 事件类型下拉框 -->
        <my-select v-if="typeShow" :show="typeShow" v-model="form.type" type="radio" popupTitle="请选择事件类型"
            :dataLists="typeList" @cancel="typeShow = false" @submit="typeSelect">
        </my-select>
        <select-bus v-if="typeShow" :show="typeShow" v-model="form[selectBusModel]" type="radio"
            :popupTitle="selectBusTitle" :dataLists="selectBusList" @cancel="typeShow = false" @submit="typeSelect">
        </select-bus>
    </view>
</template>
<script>
    import mySelect from "@/components/my-components/my-select.vue"
    import selectBus from "@/components/my-components/selectBus.vue"
    import uploadMixin from "@/mixin/uploadMixin";
    export default {
        components: {
            mySelect
            selectBus
        },
        mixins: [uploadMixin],
        data() {
            return {
                typeName: "",
                form: {
                    roleName: "",
                    relationName: '',
                    location: "",
                    title: "",
                    type: "",
                    description: "",
                },
                rules: {},
                typeShow: false,
                typeList: [{
                        value: "1",
                        name: "物业保修",
                roleName: "",
                roleList: [{
                        value: 1,
                        name: '业主',
                    },
                    {
                        value: "2",
                        name: "矛盾纠纷",
                    }
                        value: 2,
                        name: '出租户',
                    },
                    {
                        value: 3,
                        name: '空挂户',
                    },
                ],
                relationName: '',
                relationList: [{
                        value: 1,
                        name: '业主',
                    },
                    {
                        value: 2,
                        name: '妻子',
                    },
                    {
                        value: 3,
                        name: '丈夫',
                    },
                    {
                        value: 4,
                        name: '女儿',
                    },
                    {
                        value: 5,
                        name: '儿子',
                    },
                    {
                        value: 6,
                        name: '母亲',
                    },
                    {
                        value: 7,
                        name: '父亲',
                    },
                    {
                        value: 8,
                        name: '爷爷',
                    },
                    {
                        value: 9,
                        name: '女婿',
                    },
                    {
                        value: 10,
                        name: '孙子',
                    },
                    {
                        value: 11,
                        name: '孙女',
                    },
                    {
                        value: 12,
                        name: '外公',
                    },
                    {
                        value: 13,
                        name: '外婆',
                    },
                    {
                        value: 14,
                        name: '外孙女',
                    },
                    {
                        value: 15,
                        name: '外孙',
                    },
                    {
                        value: 16,
                        name: '儿媳',
                    },
                    {
                        value: 17,
                        name: '租户',
                    },
                    {
                        value: 18,
                        name: '其他',
                    },
                ],
                selectBusList: [],
                selectBusVal: '',
                selectBusTitle: '',
                selectBusModel: ''
            }
        },
        created() {
@@ -208,10 +296,18 @@
        },
        methods: {
            // 显示选择弹框
            showSelectBus(data, val, title, model) {
                this.selectBusList = data
                this.selectBusTitle = title
                this.selectBusModel = model
                this.typeShow = true
            },
            //类型选择确认
            typeSelect(item) {
                this.typeName = item.name
                this.form.type = item.value
                this[this.selectBusModel] = item.name
                this.form[this.selectBusModel] = item.value
                this.typeShow = !this.typeShow
            },
subPackage/house/roomControl/index.vue
@@ -50,7 +50,7 @@
            </view>
        </view>
        <u-modal :show="popupShow" :closeOnClickOverlay="true" showCancelButton @cancel="popupShow = false" @confirm="popupConfirm">
        <u-modal style="flex: none;" :show="popupShow" :closeOnClickOverlay="true" showCancelButton @cancel="popupShow = false" @confirm="popupConfirm">
            <view class="slot-content">
                <view class="flex_base">
                    安置房