|
|
@@ -7,15 +7,20 @@ interface Option {
|
|
|
}
|
|
|
interface HandleEvent {
|
|
|
mark: {
|
|
|
- type: 'sub' | 'options';
|
|
|
+ type: "sub" | "options";
|
|
|
index: number;
|
|
|
item: Option;
|
|
|
- }
|
|
|
+ };
|
|
|
}
|
|
|
|
|
|
Component({
|
|
|
properties: {
|
|
|
- payload: { type: Object, value: { title: '', multiple: false, options: [] }, result: '', belongNew: null },
|
|
|
+ payload: {
|
|
|
+ type: Object,
|
|
|
+ value: { title: "", multiple: false, options: [] },
|
|
|
+ result: "",
|
|
|
+ belongNew: null,
|
|
|
+ },
|
|
|
active: { type: Boolean, value: false },
|
|
|
},
|
|
|
data: {
|
|
|
@@ -23,104 +28,199 @@ Component({
|
|
|
subOptions: [] as Option[],
|
|
|
subMultiple: false,
|
|
|
itemHeight: 48,
|
|
|
- result: '', hasSelected: false,
|
|
|
- leftTitle: '都没有',
|
|
|
- rightTitle: '提交'
|
|
|
+ result: "",
|
|
|
+ hasSelected: false,
|
|
|
+ leftTitle: "都没有",
|
|
|
+ rightTitle: "提交",
|
|
|
},
|
|
|
lifetimes: {
|
|
|
attached() {
|
|
|
- console.log("attached",this.data.payload.belongNew)
|
|
|
- if(this.data.payload.belongNew){
|
|
|
+ console.log("attached", this.data.payload.belongNew,this.data.payload);
|
|
|
+ if (this.data.payload.belongNew) {
|
|
|
this.setData({
|
|
|
- leftTitle: '都没有',
|
|
|
- rightTitle: '提交'
|
|
|
- })
|
|
|
- }else{
|
|
|
+ leftTitle: "都没有",
|
|
|
+ rightTitle: "提交",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
this.setData({
|
|
|
- leftTitle: '无变化',
|
|
|
- rightTitle: '完成'
|
|
|
- })
|
|
|
+ leftTitle: "无变化",
|
|
|
+ rightTitle: "完成",
|
|
|
+ });
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
observers: {
|
|
|
- 'payload.options'(options) {
|
|
|
+ "payload.options"(options) {
|
|
|
this.setData({ options });
|
|
|
},
|
|
|
- 'options'(options: AnyArray) {
|
|
|
- this.setData({ hasSelected: options.filter(option => !option.hide).some(option => option.checked) });
|
|
|
- }
|
|
|
+ options(options: AnyArray) {
|
|
|
+ this.setData({
|
|
|
+ hasSelected: options
|
|
|
+ .filter((option) => !option.hide)
|
|
|
+ .some((option) => option.checked),
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
handleTop(event: HandleEvent) {
|
|
|
- const { mark: { item } } = event;
|
|
|
+ const {
|
|
|
+ mark: { item },
|
|
|
+ } = event;
|
|
|
+ console.log("handleTop", item, this.data.active);
|
|
|
if (!item || !this.data.active) return;
|
|
|
- console.log("handleTop",item)
|
|
|
- const index = this.data.options.findIndex(option => option.id === item.id);
|
|
|
+ console.log("handleTop", this.data.subOptions);
|
|
|
+ const index = this.data.options.findIndex(
|
|
|
+ (option) => option.id === item.id
|
|
|
+ );
|
|
|
+ // 如果当前项已选中且已有已选中的子项,则直接弹出子项程度选择弹窗以便修改
|
|
|
+ const itemInState: any = this.data.options[index];
|
|
|
+ const hasSubOptions = itemInState?.options?.filter(
|
|
|
+ (o: any) => !o?.hide
|
|
|
+ ).length;
|
|
|
+ const hasAnySubChecked = itemInState?.options?.some(
|
|
|
+ (o: any) => o?.checked
|
|
|
+ );
|
|
|
+ if (itemInState?.checked && hasSubOptions && hasAnySubChecked) {
|
|
|
+ this.setData({
|
|
|
+ subTitle: itemInState.name,
|
|
|
+ subOptions: itemInState.options,
|
|
|
+ subMultiple: itemInState.css === "checkbox",
|
|
|
+ });
|
|
|
+ this.onCancel = () => {
|
|
|
+ this.setData({ subOptions: [] });
|
|
|
+ };
|
|
|
+ this.onConfirm = () => {
|
|
|
+ if (!this.data.subOptions.some((option) => option.checked)) {
|
|
|
+ wx.showToast({ title: "请至少选择一项", icon: "error" });
|
|
|
+ } else {
|
|
|
+ const options = this.data.options;
|
|
|
+ options[index].options = this.data.subOptions;
|
|
|
+ this.setData({ subOptions: [], options });
|
|
|
+ // 单选场景:选择/修改子程度后直接提交
|
|
|
+ if (!this.data.payload.multiple) {
|
|
|
+ this.onSubmit();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return;
|
|
|
+ }
|
|
|
const multiple = this.data.payload.multiple;
|
|
|
const checked = !item.checked;
|
|
|
const options = this._handle(this.data.options, item, index, multiple);
|
|
|
this.setData({ options });
|
|
|
- if (checked && !multiple) { this.onSubmit(); }
|
|
|
+ // 注释掉自动提交的逻辑,让用户可以继续选择症状程度
|
|
|
+ if (checked && !multiple) {
|
|
|
+ this.onSubmit();
|
|
|
+ }
|
|
|
},
|
|
|
handleSub(event: HandleEvent) {
|
|
|
- const { mark: { item } } = event;
|
|
|
+ const {
|
|
|
+ mark: { item },
|
|
|
+ } = event;
|
|
|
+ console.log("handleSub", item, this.data.active);
|
|
|
if (!item || !this.data.active) return;
|
|
|
- const index = this.data.subOptions.findIndex(option => option.id === item.id);
|
|
|
+ console.log("this.data.subOptions", this.data.subOptions);
|
|
|
+ const index = this.data.subOptions.findIndex(
|
|
|
+ (option) => option.id === item.id
|
|
|
+ );
|
|
|
+ console.log("index", index);
|
|
|
const multiple = this.data.subMultiple;
|
|
|
const checked = !item.checked;
|
|
|
- const subOptions = this._handle(this.data.subOptions, item, index, multiple);
|
|
|
+ const subOptions = this._handle(
|
|
|
+ this.data.subOptions,
|
|
|
+ item,
|
|
|
+ index,
|
|
|
+ multiple
|
|
|
+ );
|
|
|
this.setData({ subOptions });
|
|
|
+ console.log(this.data.subOptions, "suboptions111");
|
|
|
|
|
|
- if (checked && !multiple) { this.onConfirm(); }
|
|
|
+ // 检查是否所有症状程度都被取消选中
|
|
|
+ const hasAnySubChecked = subOptions.some((option) => option.checked);
|
|
|
+ if (!hasAnySubChecked) {
|
|
|
+ // 如果没有任何症状程度被选中,则取消整个症状的选中状态
|
|
|
+ const mainIndex = this.data.options.findIndex(
|
|
|
+ (option) => option.name === this.data.subTitle
|
|
|
+ );
|
|
|
+ if (mainIndex !== -1) {
|
|
|
+ const options = this.data.options;
|
|
|
+ options[mainIndex].checked = false;
|
|
|
+ options[mainIndex].options = options[mainIndex].options?.map(
|
|
|
+ (option: any) => {
|
|
|
+ if (!option?.hide) option.checked = false;
|
|
|
+ return option;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ // 关闭当前弹窗,避免遮挡导致切换其它症状时看起来未选中
|
|
|
+ this.setData({ options, subOptions: [], subTitle: "" });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 注释掉自动关闭弹窗的逻辑,让用户可以继续修改症状程度
|
|
|
+ if (checked && !multiple) {
|
|
|
+ this.onConfirm();
|
|
|
+ }
|
|
|
},
|
|
|
- _handle(options: Option[], item: Option, index: number, multiple?: boolean) {
|
|
|
+ _handle(
|
|
|
+ options: Option[],
|
|
|
+ item: Option,
|
|
|
+ index: number,
|
|
|
+ multiple?: boolean
|
|
|
+ ) {
|
|
|
const checked = !item.checked;
|
|
|
if (checked) {
|
|
|
const fn = () => {
|
|
|
if (multiple) {
|
|
|
options[index].checked = checked;
|
|
|
} else {
|
|
|
- options.forEach(option => { option.checked = option.id === item.id; })
|
|
|
+ options.forEach((option) => {
|
|
|
+ option.checked = option.id === item.id;
|
|
|
+ });
|
|
|
}
|
|
|
return options;
|
|
|
- }
|
|
|
- if (item.options?.filter(option => !(<any>option)?.hide).length) {
|
|
|
+ };
|
|
|
+ if (item.options?.filter((option) => !(<any>option)?.hide).length) {
|
|
|
this.setData({
|
|
|
subTitle: item.name,
|
|
|
subOptions: item.options,
|
|
|
- subMultiple: (<any>item).css === 'checkbox'
|
|
|
- })
|
|
|
+ subMultiple: (<any>item).css === "checkbox",
|
|
|
+ });
|
|
|
this.onCancel = () => {
|
|
|
- this.setData({ subOptions: [] })
|
|
|
- }
|
|
|
+ this.setData({ subOptions: [] });
|
|
|
+ };
|
|
|
this.onConfirm = () => {
|
|
|
- if (!this.data.subOptions.some(option => option.checked)) {
|
|
|
- wx.showToast({ title: '请至少选择一项', icon: 'error' })
|
|
|
+ if (!this.data.subOptions.some((option) => option.checked)) {
|
|
|
+ wx.showToast({ title: "请至少选择一项", icon: "error" });
|
|
|
} else {
|
|
|
const options = fn();
|
|
|
options[index].options = this.data.subOptions;
|
|
|
- this.setData({ subOptions: [], options })
|
|
|
+ this.setData({ subOptions: [], options });
|
|
|
+ // 单选场景:选择子程度“确定”后直接提交
|
|
|
+ if (!this.data.payload.multiple) {
|
|
|
+ this.onSubmit();
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
} else {
|
|
|
return fn();
|
|
|
}
|
|
|
} else {
|
|
|
options[index].checked = !item.checked;
|
|
|
- if (item.options) options[index].options = item.options.map(option => {
|
|
|
- if (!(<any>option)?.hide) option.checked = !item.checked;
|
|
|
- return option;
|
|
|
- })
|
|
|
+ if (item.options)
|
|
|
+ options[index].options = item.options.map((option) => {
|
|
|
+ if (!(<any>option)?.hide) option.checked = !item.checked;
|
|
|
+ return option;
|
|
|
+ });
|
|
|
}
|
|
|
return options;
|
|
|
},
|
|
|
- onCancel() { },
|
|
|
- onConfirm() { },
|
|
|
+ onCancel() {},
|
|
|
+ onConfirm() {},
|
|
|
onSubmit() {
|
|
|
if (this.data.result) return;
|
|
|
if (!this.data.hasSelected) {
|
|
|
- wx.showToast({ title: '请至少选择一项', icon: 'error' })
|
|
|
+ wx.showToast({ title: "请至少选择一项", icon: "error" });
|
|
|
} else {
|
|
|
console.log(this.data.options);
|
|
|
const result = this.data.options
|
|
|
@@ -129,20 +229,20 @@ Component({
|
|
|
const sub = option.options
|
|
|
?.filter((item: any) => item?.checked && !item?.hide)
|
|
|
.map((item: any) => item.name)
|
|
|
- .join(', ');
|
|
|
- return [option.name, sub].filter(Boolean).join(': ')
|
|
|
+ .join(", ");
|
|
|
+ return [option.name, sub].filter(Boolean).join(": ");
|
|
|
})
|
|
|
- .join('; ');
|
|
|
+ .join("; ");
|
|
|
this.setData({ result });
|
|
|
- this.triggerEvent('next', { options: this.data.options });
|
|
|
+ this.triggerEvent("next", { options: this.data.options });
|
|
|
}
|
|
|
},
|
|
|
onSkip() {
|
|
|
if (this.data.result || this.data.hasSelected) return;
|
|
|
if (!this.data.payload.required) {
|
|
|
- this.setData({ result: '都没有' });
|
|
|
- this.triggerEvent('next', { options: this.data.options });
|
|
|
+ this.setData({ result: "都没有" });
|
|
|
+ this.triggerEvent("next", { options: this.data.options });
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|