搜索表单2

src/components/app-form-item2/app-form-item2.less

+.app-form-item2 {
+  .app-form-item2-search {
+    width: 100%;
+    font-size: 15px;
+    padding: 15px;
+    .app-form-item2_header {
+      padding: 0 5px;
+      display: flex;
+      justify-content: space-between;
+      .selectValue {
+        font-size: 13px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .select_icon {
+          ion-icon {
+            position: relative;
+            top: 2px;
+          }
+        }
+      }
+    }
+  }
+  .app-form-item {
+    width: 100%;
+    font-size: 15px;
+    --inner-padding-start: 20px;
+    --padding-start: 0;
+    .app-form-item-label-required {
+      color: #ea3424;
+    }
+    .app-form-item-label-notRequired {
+      color: #000;
+    }
+    .prompt_text {
+      position: absolute;
+      right: 25px;
+      opacity: 0.8;
+      font-size: 12px;
+      bottom: 0px;
+      color: #ea3424;
+      z-index: 10;
+    }
+    .prompt_text_right {
+      position: absolute;
+      left: 0px;
+      opacity: 0.8;
+      font-size: 12px;
+      bottom: 0px;
+      color: #ea3424;
+      z-index: 10;
+    }
+    .sc-ion-label-ios-h {
+      font-size: 15px;
+    }
+
+    --border-color: transparent;
+    --background: transparent;
+    font-family: -apple-system, "Microsoft Yahei";
+  }
+  .app-form-item.item-has-value {
+    > ion-label {
+      color: #000;
+      font-size: 15px;
+    }
+  }
+  .app-form-item {
+    ion-label {
+      min-width: 34px;
+    }
+  }
+  .left {
+    .app-form-item-input {
+      --padding-end: 26px;
+    }
+    .app-form-item-textarea {
+      --padding-end: 26px;
+    }
+  }
+  .app-form-item.item-last-item {
+    --inner-border-width: 0;
+  }
+
+  .item-disabled {
+    opacity: 0.6;
+    ion-label {
+      -webkit-opacity: 1 !important;
+      -webkit-text-fill-color: #000;
+    }
+  }
+}

src/components/app-form-item2/app-form-item2.vue

+<template>
+
+  <div class="app-form-item2">
+    <div class="app-form-item2-search"  v-if="itemType == 'MOBDROPDOWNLIST' || itemType == 'MOBRADIOLIST'">
+      <div class="app-form-item2_header">
+          <div class="sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated" :class="required?'app-form-item-label-required':'app-form-item-label-notRequired'" :style="{minWidth:labelWidth+'px'}" position="floating" v-if="isShowCaption && labelWidth > 0">{{isEmptyCaption ? '' : caption}}</div>
+          <div class="selectValue">
+              <div class="select_text" v-if="slotValue && slotValue.activeItem && slotValue.activeItem.text">{{slotValue.activeItem.text}}</div>
+              <div class="select_icon" v-if="slotValue && slotValue.options && slotValue.options.length > 6" @click="setHight"><span v-show="!slotValue || !slotValue.activeItem || !slotValue.activeItem.text">全部</span><ion-icon v-if="!allDataStatus" name="chevron-down-outline"></ion-icon><ion-icon v-if="allDataStatus" name="chevron-up-outline"></ion-icon></div>
+          </div>
+          </div>
+      <div class="app-form-item2_content" ><slot ref="slot_content"></slot></div>
+  </div>
+      <ion-item v-else  :class="[classes,labelPos.toLowerCase()]" :disabled="disabled">
+        <template v-if="uiStyle == 'STYLE2'">
+            <ion-label class="sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated" :class="required?'app-form-item-label-required':'app-form-item-label-notRequired'" :style="{minWidth:labelWidth+'px'}" position="floating" v-if="isShowCaption && labelWidth > 0">{{isEmptyCaption ? '' : caption}}</ion-label>
+            <slot></slot>
+        </template>
+        <template v-else>
+            <template v-if="labelPos == 'LEFT'">
+                <ion-label class="sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated" :class="required?'app-form-item-label-required':'app-form-item-label-notRequired'" :style="{minWidth:labelWidth+'px'}" v-if="isShowCaption && labelWidth > 0">{{isEmptyCaption ? '' : caption}}</ion-label>
+                <div :style="contentStyle" style="display: flex;align-items: center;">
+                    <slot></slot>
+                </div>
+                <div class="prompt_text">{{error}}</div>
+            </template>
+            <template v-if="labelPos == 'TOP'">
+                <ion-label
+                class="sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated"
+                :class="required?'app-form-item-label-required':'app-form-item-label-notRequired'"
+                :style="{minWidth:labelWidth+'px'}"
+                position="floating"
+                v-if="isShowCaption && labelWidth > 0">
+                    {{isEmptyCaption ? '' : caption}}
+                </ion-label>
+                <slot></slot>
+                <div class="prompt_text">{{error}}</div>
+            </template>
+            <template v-if="labelPos == 'RIGHT' ">
+                <slot></slot>
+                <div class="prompt_text_right">{{error}}</div>
+                <ion-label class="sc-ion-label-ios-h sc-ion-label-ios-s ios hydrated" :class="required?'app-form-item-label-required':'app-form-item-label-notRequired'" :style="{minWidth:labelWidth+'px'}" v-if="isShowCaption && labelWidth > 0">{{isEmptyCaption ? '' : caption}}</ion-label>
+            </template>
+            <template v-if="labelPos == 'NONE'" >
+                <slot></slot>
+            </template>
+      </template>
+  </ion-item>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { Util } from '@/ibiz-core/utils';
+@Component({})
+export default class AppFormItem extends Vue {
+    /**
+     * 内容样式
+     *
+     * @readonly
+     * @memberof AppFormItem
+     */
+    get contentStyle() {
+        return {
+            width: this.isShowCaption && this.labelWidth > 0 ? `calc(100% - ${this.labelWidth}px)` : '100%',
+        }
+    }
+
+    /**
+     * item类型
+     *
+     * @readonly
+     * @memberof AppFormItem
+     */
+    @Prop() public itemType?: string;
+
+    /**
+     * 所有数据显示状态
+     *
+     * @readonly
+     * @memberof AppFormItem
+     */
+    public allDataStatus: boolean = false;
+
+        /**
+     * 名称
+     *
+     * @type {string}
+     * @memberof AppFormItem
+     */
+    @Prop() public caption!: string;
+
+    /**
+     * 是否禁用
+     *
+     * @type {boolean}
+     * @memberof AppFormItem
+     */
+    @Prop() public disabled?: boolean;
+
+    /**
+     * 错误信息
+     *
+     * @type {string}
+     * @memberof AppFormItem
+     */
+    @Prop() public error?: string;
+
+    /**
+     * 表单项值
+     *
+     * @type {string}
+     * @memberof AppFormItem
+     */
+    @Prop() public itemValue?: any;
+
+    /**
+     * 插槽值
+     *
+     * @type {string}
+     * @memberof AppFormItem
+     */
+    public slotValue: any = {};
+
+    /**
+     * 校验值规则
+     *
+     * @type {string}
+     * @memberof AppFormItem
+     */
+    @Watch('itemValue')
+    onItemValueChange() {
+        // this.validateRules();
+        let slot: any = this.getSlot();
+        setTimeout(() => {
+            if (slot && slot.componentInstance) {
+                this.slotValue = slot.componentInstance;
+            }
+        }, 1);
+    }
+
+    /**
+     * 获取插槽值
+     *
+     * @readonly
+     * @memberof AppFormItem
+     */
+    public getSlot() {
+        let slot: any = this.$slots.default
+        if (slot) {
+            return slot[0]
+        }
+        return null
+    }
+
+    /**
+     * 错误信息
+     *
+     * @type {string}
+     * @memberof AppFormItem
+     */
+    public errorText: string = '';
+
+    /**
+     * label样式
+     *
+     * @type {string}
+     * @memberof AppFormItem
+     */
+    @Prop() public labelStyle?: string;
+
+    /**
+     * 标签位置
+     *
+     * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
+     * @memberof AppFormItem
+     */
+    @Prop() public labelPos?: string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP';
+
+    /**
+     * 标签宽度
+     *
+     * @type {number}
+     * @memberof AppFormItem
+     */
+    @Prop({}) public labelWidth!: number;
+
+    /**
+     * 是否显示标题
+     *
+     * @type {boolean}
+     * @memberof AppFormItem
+     */
+    @Prop() public isShowCaption?: boolean;
+
+    /**
+     * 标签是否空白
+     *
+     * @type {boolean}
+     * @memberof AppFormItem
+     */
+    @Prop() public isEmptyCaption?: boolean;
+
+    /**
+     * 表单项名称
+     *
+     * @type {string}
+     * @memberof AppFormItem
+     */
+    @Prop() public name!: string;
+
+    /**
+     * 内置样式
+     *
+     * @type {string}
+     * @memberof AppFormItem
+     */
+    @Prop() public uiStyle?: string;
+
+    /**
+     * 表单项值规则
+     *
+     * @type {string}
+     * @memberof AppFormItem
+     */
+    @Prop() public itemRules!: any;
+
+    /**
+     * 值规则数组
+     *
+     * @type {any[]}
+     * @memberof AppFormItem
+     */
+    public rules: any[] = [];
+
+    /**
+     * 是否必填
+     *
+     * @type {boolean}
+     * @memberof AppFormItem
+     */
+    public required: boolean = false;
+
+    /**
+     * 表单项值规则监控
+     *
+     * @param {*} newVal
+     * @param {*} oldVal
+     * @memberof AppFormItem
+     */
+    @Watch('itemRules', { deep: true })
+    onItemRulesChange(newVal: any, oldVal: any) {
+        if (!newVal) {
+            return;
+        }
+        this.computeRequired(newVal);
+    }
+
+    /**
+     * 设置高度
+     *
+     * @readonly
+     * @memberof AppFormItem
+     */
+    public setHight() {
+        let slot: any = this.$slots.default
+        if (slot) {
+            setTimeout(() => {
+                if (slot[0].elm.style.height != 'auto') {
+                    this.allDataStatus = true;
+                    slot[0].elm.style.height = "auto";
+                } else {
+                    this.allDataStatus = false;
+                    slot[0].elm.style.height = "105px";
+                }
+
+            }, 1);
+
+        }
+    }
+
+    /**
+     * 计算样式
+     *
+     * @readonly
+     * @type {string []}
+     * @memberof AppFormItem
+     */
+    get classes(): string[] {
+        return [
+            'app-form-item',
+            Object.is(this.labelPos, 'TOP') ? 'app-form-item-label-top' : ''
+        ];
+    }
+
+    /**
+     * label样式
+     *
+     * @readonly
+     * @type {string[]}
+     * @memberof IBizMDControl
+     */
+    get labelclasses(): string[] {
+        return [
+            this.required ? 'app-form-item-label-required' : '',
+            this.labelStyle ? this.labelStyle : ''
+        ];
+    }
+
+    /**
+     * vue 生命周期
+     *
+     * @memberof AppFormItem
+     */
+    public mounted() {
+        if (this.itemRules) {
+            this.computeRequired(this.itemRules);
+        }
+        setTimeout(() => {
+            let slot: any = this.getSlot();
+            setTimeout(() => {
+                if (slot && slot.componentInstance) {
+                    this.slotValue = slot.componentInstance;
+                }
+            }, 1);
+        }, 1000);
+    }
+
+    /**
+     * 计算是否必填
+     *
+     * @private
+     * @param {*} rules
+     * @memberof AppFormItem
+     */
+    private computeRequired(rules: any): void {
+        try {
+            const _rules: any[] = rules;
+            this.rules = [..._rules];
+            this.rules.some((rule: any) => {
+                if (rule.hasOwnProperty('required')) {
+                    this.required = rule.required;
+                    return true;
+                }
+                return false;
+            });
+        } catch (error) {
+        }
+    }
+
+    /**
+     * 校验值规则
+     *
+     * @returns {boolean}
+     * @memberof AppFormItem
+     */
+    public async validateRules(): Promise<boolean> {
+        return await this.validate(name, this.itemValue);
+    }
+
+    /**
+     * 校验值规则
+     *
+     * @returns {boolean}
+     * @memberof AppFormItem
+     */
+    public validate(property: string, data: any): Promise<any> {
+        return new Promise((resolve, reject) => {
+            Util.validateItem(property, data, this.rules).then(() => {
+                this.errorText = "";
+                resolve(true);
+            }).catch(({ errors, fields }) => {
+                this.errorText = errors[0].message;
+                resolve(false);
+            });
+        });
+    }
+
+}
+</script>
+
+<style lang='less'>
+@import './app-form-item2.less';
+</style>
\ No newline at end of file

src/components/app-search-editor/app-search-editor.less

+.app-search-editor {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  flex-wrap: wrap;
+  height: 105px;
+  overflow: hidden;
+  .app-search-editor-item {
+    width: calc(33% - 16px);
+    height: 40px;
+    border: 0.3px solid #e6e8ef;
+    margin: 8px;
+    line-height: 40px;
+    text-align: center;
+    font-size: 12px;
+  }
+  .app-search-editor-item-active {
+    border-color: #333;
+  }
+}

src/components/app-search-editor/app-search-editor.vue

+<template>
+  <div class="app-search-editor">
+    <div class="app-search-editor-item" :class="{'app-search-editor-item-active':selectValue.value == item.value}" @click="itemClick(item)" v-for="item in options " :key="item.id">{{item.text}}</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { Util } from '@/ibiz-core/utils';
+import { CodeListService } from "@/ibiz-core";
+@Component({})
+export default class AppSearchEditor extends Vue {
+    /**
+      * 代码表服务对象
+      *
+      * @type {CodeListService}
+      * @memberof AppSearchEditor
+      */
+    public codeListService: CodeListService = new CodeListService();
+
+    /**
+      * 激活项
+      *
+      * @type {CodeListService}
+      * @memberof AppSearchEditor
+      */
+    public activeItem: any = {};
+
+    /**
+      * 获取选中值
+      *
+      * @type {CodeListService}
+      * @memberof AppSearchEditor
+      */
+    get selectValue() {
+        return this.activeItem;
+    }
+
+    /**
+      * 点击行为
+      *
+      * @type {CodeListService}
+      * @memberof AppSearchEditor
+      */
+    public itemClick(item: any) {
+        if (this.activeItem.value == item.value) {
+            this.activeItem = {};
+            this.change(null);
+            return
+        }
+        this.activeItem = item;
+        this.change(item);
+    }
+
+    /**
+     * 传入值
+     *
+     * @type {string}
+     * @memberof AppSearchEditor
+     */
+    @Prop() public value?: any;
+
+
+    /**
+     * 当前选中值
+     * @memberof AppSearchEditor
+     */
+    get curValue() {
+        if (this.options.length > 0 && this.value !== null && this.value !== "") {
+            let isIncluded = this.options.some((option: any) => { return option.value === this.value })
+            if (isIncluded) {
+                return this.value;
+            }
+        }
+        return "";
+    }
+
+    /**
+     * 下拉数据数组
+     *
+     * @type {any[]}
+     * @memberof AppSearchEditor
+     */
+    public options: any[] = [];
+
+    /**
+     * 是否禁用
+     *
+     * @type {string}
+     * @memberof AppSearchEditor
+     */
+    @Prop() public disabled?: string;
+
+    /**
+     * 代码表标识
+     *
+     * @type {string}
+     * @memberof AppSearchEditor
+     */
+    @Prop() public tag!: string;
+
+    /**
+     * 代码表类型
+     * STATIC：静态
+     * DYNAMIC：动态
+     *
+     * @type {('STATIC' | 'DYNAMIC')}
+     * @memberof Login
+     */
+    @Prop() public codeListType!: 'STATIC' | 'DYNAMIC';
+
+    /**
+     * 传入表单数据
+     *
+     * @type {*}
+     * @memberof AppSearchEditor
+     */
+    @Prop() public data?: any;
+
+    /**
+     * 应用上下文
+     *
+     * @type {*}
+     * @memberof AppSearchEditor
+     */
+    @Prop({ default: {} }) protected context?: any;
+
+    /**
+     * 导航参数
+     *
+     * @type {*}
+     * @memberof AppSearchEditor
+     */
+    @Prop({ default: {} }) protected navigateParam?: any;
+
+    /**
+     * 导航上下文
+     *
+     * @type {*}
+     * @memberof AppSearchEditor
+     */
+    @Prop({ default: {} }) protected navigateContext?: any;
+
+    /**
+     * 是否缓存
+     *
+     * @type {*}
+     * @memberof AppSearchEditor
+     */
+    @Prop({ default: true }) protected isCache?: boolean;
+
+    /**
+     * 视图参数
+     *
+     * @type {*}
+     * @memberof AppSearchEditor
+     */
+    @Prop() public viewparams!: any;
+
+    /**
+     * 是否被缓存
+     *
+     * @type {*}
+     * @memberof AppSearchEditor
+     */
+    public isCached: boolean = false;
+
+    /**
+     * 监听表单数据
+     *
+     * @param {*} newVal
+     * @param {*} val
+     * @memberof AppSearchEditor
+     */
+    @Watch('value')
+    onDataChange(newVal: any, oldVal: any) {
+        if (!newVal) {
+            this.activeItem = {};
+        }
+        if (newVal) {
+            this.load();
+            this.$store.commit('setSelectStatus', true);
+        }
+    }
+
+    /**
+     * change事件
+     *
+     * @memberof AppSearchEditor
+     */
+    public change(value: any) {
+        this.$store.commit('setSelectStatus', true);
+        let devalue: any = value.value;
+        if (devalue !== '') {
+            for (let key in this.options) {
+                if (this.options[key].isValueNumber) {
+                    devalue = +devalue;
+                }
+            }
+            if (Object.is(this.codeListType, 'DYNAMIC')) {
+                for (let key in this.options) {
+                    if (typeof this.options[key].id == 'number') {
+                        devalue = +devalue;
+                    }
+                }
+            }
+        }
+        this.$emit("change", devalue);
+    }
+
+    /**
+     * 取消选择
+     *
+     * @type {*}
+     * @memberof AppSearchEditor
+     */
+    public cancel() {
+        this.$store.commit('setSelectStatus', true);
+    }
+
+    /**
+     * 加载
+     *
+     * @memberof AppSearchEditor
+     */
+    public async load(): Promise<any> {
+        this.$store.commit('setSelectStatus', false);
+        if (Object.is(this.codeListType, "STATIC")) {
+            return;
+        }
+
+        // 处理导航参数、上下文参数
+        let param: any = {};
+        const bcancel: boolean = this.handleOtherParam(param);
+        if (!bcancel) {
+            return
+        }
+        let response: any = await this.codeListService.getItems(this.tag, param.context, param.param);
+        if (response) {
+            this.options = response
+            if (this.isCache) {
+                this.isCached = true;
+            }
+        } else {
+            this.options = [];
+        }
+    }
+
+    /**
+     * 清空值
+     * 
+     * @memberof AppSearchEditor
+     */
+    public clear() {
+        this.$emit("change", "");
+    }
+
+    /**
+     * 处理额外参数
+     * 
+     * @memberof AppSearchEditor
+     */
+    public handleOtherParam(arg: any) {
+        if (!this.data) {
+            return false;
+        }
+        // 附加参数处理
+        const { context, param } = this.$viewTool.formatNavigateParam(this.navigateContext, this.navigateParam, this.context, this.viewparams, this.data);
+        arg.context = context;
+        arg.param = param;
+        return true;
+    }
+
+    /**
+     * 生命周期
+     * 
+     * @memberof AppSearchEditor
+     */
+    public mounted() {
+        if (Object.is(this.codeListType, "STATIC")) {
+            this.options = this.$store.getters.getCodeListItems(this.tag);
+            console.log(this.options);
+
+        } else {
+            if (this.curValue) {
+                this.load();
+                this.$store.commit('setSelectStatus', true);
+            }
+        }
+    }
+}
+</script>
+
+<style lang='less'>
+@import './app-search-editor.less';
+</style>
\ No newline at end of file