2 files modified
1 files added
| New file |
| | |
| | | <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> |
| | |
| | | <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> |
| | |
| | | |
| | | <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 @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 @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 @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 @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 @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 @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 @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> |
| | |
| | | |
| | | |
| | | <!-- 事件类型下拉框 --> |
| | | <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() { |
| | |
| | | |
| | | }, |
| | | 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 |
| | | }, |
| | | |
| | |
| | | </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"> |
| | | 安置房 |