You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
310 lines
11 KiB
310 lines
11 KiB
<template>
|
|
<view>
|
|
<van-action-sheet :show="show" :title="title" @close="onClose">
|
|
<van-cell-group>
|
|
<block v-if="!item.hide" v-for="(item, index) in formControllers" :key="index">
|
|
<van-field
|
|
v-if="item.type === 'input'"
|
|
:label="item.label"
|
|
v-model="item.value"
|
|
:placeholder="'请输入' + item.label"
|
|
@input="setVal($event, { key: item.key, index })"
|
|
:data-key="item.key"
|
|
:data-index="index"
|
|
/>
|
|
|
|
<van-field
|
|
v-if="item.type === 'textarea'"
|
|
type="textarea"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
:placeholder="'请输入' + item.label"
|
|
autosize
|
|
:maxlength="item.maxlength ? item.maxlength : -1"
|
|
:show-word-limit="item.maxlength"
|
|
@input="setVal($event, { key: item.key, index })"
|
|
:data-key="item.key"
|
|
:data-index="index"
|
|
/>
|
|
|
|
<block v-if="item.type === 'date'">
|
|
<van-cell
|
|
:title="item.label"
|
|
:value="item.value ? item.value : '请选择' + item.label"
|
|
@click="onShowDate($event, { value: item.value, index, key: item.key })"
|
|
:data-value="item.value"
|
|
:data-index="index"
|
|
:data-key="item.key"
|
|
/>
|
|
</block>
|
|
|
|
<block v-if="item.type === 'checkbox'">
|
|
<van-cell
|
|
:title="item.label"
|
|
:value="item.selected ? item.selected : '请选择' + item.label"
|
|
@click="onShowCheckbox($event, { options: item.options, value: item.value, label: item.label, index, key: item.key })"
|
|
:data-options="item.options"
|
|
:data-value="item.value"
|
|
:data-label="item.label"
|
|
:data-index="index"
|
|
:data-key="item.key"
|
|
/>
|
|
</block>
|
|
|
|
<block v-if="item.type === 'select'">
|
|
<picker
|
|
:value="item.valueIndex"
|
|
:range="item.options"
|
|
:range-key="item.optionsKey || 'label'"
|
|
@change="pickerChange"
|
|
:data-value="item.value"
|
|
:data-valuekey="item.valueKey || 'value'"
|
|
:data-options="item.options || []"
|
|
:data-currentindex="index"
|
|
:data-optionsKey="item.optionsKey || 'label'"
|
|
:data-index="index"
|
|
:data-key="item.key"
|
|
>
|
|
<van-cell :title="item.label" :value="item.valueIndex >= 0 ? item.options[item.valueIndex][item.optionsKey || 'label'] : '请选择' + item.label" />
|
|
</picker>
|
|
</block>
|
|
</block>
|
|
</van-cell-group>
|
|
<view class="bottom-btn">
|
|
<view class="btn btn-gray" @tap="onClose">取消</view>
|
|
<view class="btn btn-blue" @tap="sure">确定</view>
|
|
</view>
|
|
</van-action-sheet>
|
|
|
|
<van-calendar :show="showDate" @close="onCloseDate" @confirm="onConfirmDate" :default-date="defaultDate" />
|
|
<van-action-sheet :show="showCheckbox" :title="checkboxTitle" @close="onCloseCheckbox">
|
|
<scroll-view scroll-y style="max-height: 50vh">
|
|
<van-checkbox-group :value="checkboxResult" @change="onChangeCheckbox">
|
|
<view class="checkbox-item" :data-index="index" @tap="toggle" v-for="(item, index) in checkboxOptions" :key="index">
|
|
<van-checkbox :name="item.value" :class="'checkboxes-' + index">
|
|
{{ item.label }}
|
|
</van-checkbox>
|
|
</view>
|
|
</van-checkbox-group>
|
|
</scroll-view>
|
|
<view class="bottom-btn">
|
|
<view class="btn btn-gray" @tap="onCloseCheckbox">取消</view>
|
|
<view class="btn btn-blue" @tap="sureCheckbox">确定</view>
|
|
</view>
|
|
</van-action-sheet>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
showDate: false,
|
|
dateKey: '',
|
|
defaultDate: '',
|
|
dateIndex: '',
|
|
formControllers: {},
|
|
showCheckbox: false,
|
|
checkboxTitle: '',
|
|
checkboxResult: [],
|
|
checkboxOptions: [],
|
|
checkboxIndex: ''
|
|
};
|
|
},
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: ' '
|
|
},
|
|
formController: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
methods: {
|
|
onClose() {
|
|
this.$emit('close');
|
|
},
|
|
onCloseCheckbox() {
|
|
this.setData({
|
|
showCheckbox: false
|
|
});
|
|
},
|
|
sureCheckbox() {
|
|
let formControllers = this.formControllers;
|
|
let checkboxResult = this.checkboxResult;
|
|
let label = [];
|
|
formControllers[this.checkboxIndex].value = checkboxResult.join(',');
|
|
checkboxResult.forEach((item) => {
|
|
formControllers[this.checkboxIndex].options.forEach((option) => {
|
|
if (option.value == item) {
|
|
label.push(option.label);
|
|
}
|
|
});
|
|
});
|
|
formControllers[this.checkboxIndex].selected = label.join(',');
|
|
this.setData({
|
|
formControllers,
|
|
showCheckbox: false
|
|
});
|
|
},
|
|
toggle(event) {
|
|
console.log(event);
|
|
const { index } = event.currentTarget.dataset;
|
|
const checkbox = this.zpSelectComponent(`.checkboxes-${index}`);
|
|
console.log(checkbox);
|
|
checkbox.toggle();
|
|
},
|
|
onChangeCheckbox(event) {
|
|
this.setData({
|
|
checkboxResult: event.detail
|
|
});
|
|
},
|
|
onShowCheckbox(e, _dataset) {
|
|
/* ---处理dataset begin--- */
|
|
this.handleDataset(e, _dataset);
|
|
/* ---处理dataset end--- */
|
|
let { options, value, label, index } = e.currentTarget.dataset;
|
|
this.setData({
|
|
showCheckbox: true,
|
|
checkboxTitle: '选择' + label,
|
|
checkboxResult: value.split(','),
|
|
checkboxOptions: options,
|
|
checkboxIndex: index
|
|
});
|
|
},
|
|
onShowDate(e, _dataset) {
|
|
/* ---处理dataset begin--- */
|
|
this.handleDataset(e, _dataset);
|
|
/* ---处理dataset end--- */
|
|
let { key, value, index } = e.currentTarget.dataset;
|
|
console.log(e.currentTarget.dataset);
|
|
this.setData({
|
|
showDate: true,
|
|
dateKey: key,
|
|
defaultDate: value,
|
|
dateIndex: index
|
|
});
|
|
},
|
|
onCloseDate(e) {
|
|
this.setData({
|
|
showDate: false
|
|
});
|
|
},
|
|
formatDate(date) {
|
|
date = new Date(date);
|
|
return `${date.getFullYear()}-${date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)}-${
|
|
date.getDate() > 10 ? date.getDate() : '0' + date.getDate()
|
|
}`;
|
|
},
|
|
onConfirmDate(e) {
|
|
let formControllers = this.formControllers;
|
|
formControllers[this.dateIndex].value = this.formatDate(e.detail);
|
|
this.setData({
|
|
showDate: false,
|
|
formControllers
|
|
});
|
|
console.log(this.formControllers);
|
|
},
|
|
setVal(e, _dataset) {
|
|
/* ---处理dataset begin--- */
|
|
this.handleDataset(e, _dataset);
|
|
/* ---处理dataset end--- */
|
|
let formControllers = this.formControllers;
|
|
console.log(e);
|
|
formControllers[e.currentTarget.dataset.index].value = e.detail;
|
|
this.setData({
|
|
showDate: false,
|
|
formControllers
|
|
});
|
|
console.log(this.formControllers);
|
|
},
|
|
pickerChange(e) {
|
|
let { valuekey, options, currentindex, key } = e.currentTarget.dataset;
|
|
let index = e.detail.value;
|
|
console.log(key, 'key');
|
|
let formControllers = this.formControllers;
|
|
let selected = options[index];
|
|
formControllers[currentindex].value = selected[valuekey];
|
|
formControllers[currentindex].valueIndex = e.detail.value;
|
|
if (selected.masterControl) {
|
|
formControllers.forEach((item) => {
|
|
if (item.showFlag) {
|
|
if (item.showFlag === selected[valuekey]) {
|
|
item.hide = false;
|
|
} else {
|
|
item.hide = true;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
this.setData({
|
|
formControllers
|
|
});
|
|
},
|
|
sure() {
|
|
console.log('ok', this.formControllers);
|
|
this.$emit('ok', {
|
|
detail: this.formControllers
|
|
});
|
|
this.onClose();
|
|
}
|
|
},
|
|
created: function () {},
|
|
watch: {
|
|
formController: {
|
|
handler: function (val) {
|
|
this.setData({
|
|
formControllers: val
|
|
});
|
|
},
|
|
|
|
immediate: true,
|
|
deep: true
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.btn {
|
|
width: 240rpx;
|
|
height: 76rpx;
|
|
border-radius: 38rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
.btn-blue {
|
|
background: linear-gradient(87deg, #81b5fb 0%, #3e92ff 100%);
|
|
}
|
|
.btn-gray {
|
|
background: #d9d9d9;
|
|
}
|
|
|
|
.bottom-btn {
|
|
background: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 99rpx 20rpx;
|
|
/*padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);*/
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
z-index: 999;
|
|
position: static;
|
|
}
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx 40rpx;
|
|
border-bottom: 1px solid #f2f2f2;
|
|
}
|
|
</style>
|
|
|