JLH/JLHAPP/src/components/lj-dictionary.vue

<!--以一行一个字段的形式展示对象信息-->
<!--文档-->
<!--props：看代码注释-->
<!--events-->
<!--删除按钮确认通过on-delete，参数（value）-->
<!--Action类型的字段点击事件action-row-click，参数{field}-->
<!--column.buttonText不为空时，输入框右边辅助按钮点击事件row-button-click，参数{field}-->
<template>
    <group class="lj-group" style="box-sizing: content-box;" label-width="60px">
        <cell
                class="cell-row"
                v-if="deletable"
                @click.native="handleDeleteButton">
                <span style="color:brown;">
                    删除
                </span>
        </cell>
        <template v-for="column in filtedList">
            <!-- 静态文本 -->
            <cell
                    v-show="isRowDisplay(column)"
                    v-if="column.cardParams.type === 'TextField'"
                    :title="column.label"
                    :primary="cellPrimary"
                    :value-align="textAlign"
                    class="cell-row"
                    :class="{'readonly': !column.cardParams.enabled}"
                    :style="column.style">
                    <div>
                        <span style="color: #000">{{data[column.property] + (column.append?' '+data[column.append]:'')}}</span>
                    </div>
            </cell>
            <!-- 文本输入 -->
            <x-input
                    :ref="column.property"
                    v-show="isRowDisplay(column)"
                    v-if="column.cardParams.type === 'TextInput'"
                    :title="column.label"
                    v-model="data[column.property]"
                    :required="column.cardParams.required"
                    :text-align="textAlign"
                    :placeholder="column.cardParams.required? '必填' : ''"
                    :show-clear="false"
                    :readonly="!column.cardParams.enabled"
                    class="cell-row"
                    :class="{'readonly': !column.cardParams.enabled}"
                    @on-focus="handleInputFocus"
                    @on-blur="handleInputBlur"
                    @on-enter="handleEnter(column.property, $event)">
                <span slot="right" v-if="column.append">{{data[column.append]}}</span>
                <span slot="right" @click="handleIcon(column.property, $event)" v-if="column.icon" style="font-size:20px;margin:0px 15px">
                    <svg class="icon" aria-hide="true" >
                        <use :xlink:href="column.icon"></use>
                    </svg>
                </span>
                <x-button slot="right" v-if="column.buttonText" type="primary" plain mini
                    @click.native="handleRowButtonClick(column.property, $event)">{{column.buttonText}}
                </x-button>   
                
                
            </x-input>
            <!-- 数字输入 -->
            <x-input
                    v-show="isRowDisplay(column)"
                    v-if="column.cardParams.type === 'Number'"
                    :title="column.label"
                    v-model="data[column.property]"
                    :required="column.cardParams.required"
                    type="tel"
                    :show-clear="false"
                    @on-focus="handleInputFocus"
                    @on-blur="handleInputBlur"
                    :text-align="textAlign"
                    :placeholder="column.cardParams.required? '必填' : ''"
                    class="cell-row">
                <span slot="right" v-if="column.append">&nbsp;{{data[column.append]}}</span>
                <span @click="handleIcon(column.property, $event)" v-if="column.icon" style="font-size:20px;margin:0px 15px">
                    <svg class="icon" aria-hide="true" >
                        <use :xlink:href="column.icon"></use>
                    </svg>
                </span>
                <x-button v-if="column.buttonText" slot="right" type="primary" plain mini
                          @click.native="handleRowButtonClick(column.property, $event)">{{column.buttonText}}
                </x-button>
            </x-input>
            <!--多行文字输入-->
            <x-textarea
                v-show="isRowDisplay(column)"
                v-if="column.cardParams.type === 'TextArea'"
                :title="column.label"
                v-model="data[column.property]"
                :rows="column.inputLine"
                :placeholder="column.cardParams.required? '必填' : ''"
                class="cell-row" style="height: auto;">
            </x-textarea>
            <!--<x-number-->
            <!--v-if="column.cardParams.type === 'Number'"-->
            <!--:title="column.label"-->
            <!--v-model="data[column.property]"-->
            <!--:required="column.cardParams.required"-->
            <!--text-align="right"-->
            <!--fillable-->
            <!--:ref="column.property"-->
            <!--button-style="round"-->
            <!--class="cell-row lj-dictionary-number">-->
            <!--<span slot="right" v-if="column.append">{{column.append}}</span>-->
            <!--</x-number>-->
            <!-- 勾选 -->
            <x-switch
                    v-show="isRowDisplay(column)"
                    v-if="column.cardParams.type === 'Checkbox'"
                    :title="column.label"
                    :value-map="[0, 1]"
                    class="cell-row"
                    :class="{'readonly': !column.cardParams.enabled}"
                    v-model="data[column.property]"
                    :disabled="!column.cardParams.enabled"
                    @switch-height="cell-row"
                    style="padding-top: 10px;padding-bottom: 10px"/>
            <!--时间选择器-->
            <datetime
                    v-show="isRowDisplay(column)"
                    v-if="column.cardParams.type === 'DateTime'"
                    v-model="data[column.property]"
                    :readonly="!column.cardParams.enabled"
                    :title="column.label"
                    :format="column.cardParams.format"
                    :display-format="dateTimeDisplayFormatMap[column.cardParams.format]"
                    :class="{'readonly': !column.cardParams.enabled}"
                    class="cell-row">
                <div style="display: flex;width: 100%;">
                    <label v-html="titleHtml(column.label)"></label>
                    <div style="width: 100%">
                        <div style="float: left;">{{column.inlineDesc}}</div>
                        <div style="float: right;">{{dateTimeDisplayFormatMap[column.cardParams.format](data[column.property])}}</div>
                    </div>
                </div>
            </datetime>
            <!--选择器-->
            <lj-select
                    v-show="isRowDisplay(column)"
                    v-if="column.cardParams.type === 'Select'"
                    cell
                    class="cell-row"
                    :title="titleHtml(column.label)"
                    :disabled="!column.cardParams.enabled"
                    v-model="data[column.property]"
                    :options="column.cardParams.selectOptions.options"
                    :value-map="column.cardParams.selectOptions.valueMap"
                    :options-api="column.cardParams.selectOptions.optionsApi"
                    :api-params="column.cardParams.selectOptions.apiParams"
                    :extra-options="column.cardParams.selectOptions.extraOptions"
                    @change="handleRowSelectChange(column.property, $event)"/>
            <!-- 右侧带箭头的文本，具有点击动画，触发事件 -->
            <cell
                    v-show="isRowDisplay(column)"
                    v-if="column.cardParams.type === 'Action'"
                    :title="column.label"
                    is-link
                    @click.native="handleActionRowClick(column.property, $event)"
                    :value-align="textAlign"
                    :primary="cellPrimary"
                    class="cell-row">
                <div>
                    <span style="color: #000">{{data[column.property]}}</span>
                </div>    
            </cell>
        </template>
    </group>
</template>

<script>
    import {XInput, XSwitch, Group, Cell, Datetime, GroupTitle, XNumber, XButton,XTextarea} from 'vux'
    import LjSelect from "components/lj-select";

    export default {
        name: "lj-dictionary",
        components: {
            XTextarea,
            XButton,
            LjSelect,
            GroupTitle,
            Datetime,
            Group,
            Cell,
            XInput,
            XSwitch,
            XNumber
        },
        props: {
            data: {
                // 数据模型
                type: Object,
                default: function () {
                    return {};
                }
            },
            columns: {
                // 模型字段
                type: Array,
                default: function () {
                    return [];
                }
                // column:{
                //     label:标题,
                //     property:字段,
                //     type: DateTime/Number/Select/Action/AlwaysAction/Boolean/TextField/TextInput,
                //     format: DateTime所用的时间选择及显示格式，默认YYYY-MM-DD，参考格式YYYY-MM-DD HH:mm
                //     selectOptions:lj-select属性,
                //     required: -1不可编辑/0默认/1必填,
                //     append: 后缀
                //     buttonText:右侧附加按钮文字
                //     inputLine: 文字输入行数
                //     inlineDesc:日期类型-描述
                //     icon :后置图标
                //     maxEnable:最高级判断是否能编辑
                // }
            },
            // 是否显示删除按钮
            deletable: {
                type: Boolean,
                default: false
            },
            // 是否正在编辑状态
            editing: {
                type: Boolean,
                default: false
            }
        },
        mounted() {
            this.refreshDisplayColumnList();
        },
        data() {
            return {
                styleList: null,
                filtedList: [],
                cellPrimary: "content",
                textAlign: "left",
                height: '100px',
                dateTimeDisplayFormatMap: {}
            }
        },
        methods: {
            titleHtml(label){
                // return `<div style="width:60px;font-weight: bold;text-align-last: justify;">${label}</div>`;
                return `<div>${label}</div>`;
            },
            isRowDisplay(column) {
                return !(column.hideWhenEditing && this.editing);
            },
            computeStyleList() {
                let self = this;
                // 计算标签类型、是否必填、是否可编辑
                let list = this.columns;
                for (let item of list) {
                    if (item.display === undefined) {
                        item.display = true;
                    }
                    let cardParams = {};
                    if (item.type) {
                        if (item.type === "Boolean") {
                            cardParams.type = 'Checkbox';
                        } else if (item.type === 'Select') {
                            cardParams.type = item.type;
                            if (item.selectOptions) {
                                cardParams.selectOptions = item.selectOptions;
                            } else {
                                console.error("错误，未设置select属性")
                            }
                        } else if (item.type === "DateTime") {
                            cardParams.type = item.type;
                            let vuxFormat = "YYYY-MM-DD";
                            if (item.format) {
                                vuxFormat = item.format;
                            }
                            cardParams.format = vuxFormat;
                            let ljFormat = vuxFormat.toLowerCase().replace("mm", "MM");
                            if (!this.dateTimeDisplayFormatMap[vuxFormat]) {
                                this.dateTimeDisplayFormatMap[vuxFormat] = function (val) {
                                    return $lj.dateformat(val, ljFormat);
                                }
                            }
                        } else {
                            cardParams.type = item.type; // Number || AlwaysAction|| Action
                        }
                    } else {
                        if (item.inputLine && item.inputLine > 1) {
                            cardParams.type = 'TextArea';
                        } else {
                            cardParams.type = 'TextField';
                        }
                    }
                    var editable = (item.required !== -1);

                    if (cardParams.type === 'AlwaysAction') {
                        cardParams.type = 'Action'
                    } else if (cardParams.type === 'AlwaysInput') {
                        cardParams.enabled = true;
                        cardParams.type = 'TextInput';
                    } else if (this.editing && editable) {
                        cardParams.enabled = true;
                        if (cardParams.type === 'TextField') {
                            cardParams.type = 'TextInput';
                        } else if (cardParams.type === 'AlwaysAction') {
                            cardParams.type = 'Action';
                        }
                        if (item.required === 1) {
                            cardParams.required = true;
                        }
                    } else {
                        cardParams.enabled = false;
                        if ('Checkbox,Select,DateTime'.indexOf(cardParams.type) < 0) {
                            cardParams.type = 'TextField';
                        }
                    }
                    if (item.maxEnable === true) {
                        cardParams.enabled = true;
                    }else if (item.maxEnable === false){
                        cardParams.enabled = false;
                        
                    }
                    item.cardParams = cardParams;
                }
                this.styleList = list;
            },
            handleDeleteButton() {
                if (!this.deletable) return;
                if (!confirm("确定删除所选记录？")) return;
                this.$emit('on-delete', this.data);
            },
            handleActionRowClick(field, event) {
                let eventData = {field: field};
                this.$emit("action-row-click", eventData);
            },
            handleRowButtonClick(field, event) {
                let eventData = {field: field};
                this.$emit("row-button-click", eventData);
            },
            handleIcon(field, event){
                let eventData = {field: field};
                this.$emit("row-icon-click",eventData);
            },
            handleEnter(field, event){
                let eventData = {field: field};
                this.$emit("row-kd-enter",eventData);
            },
            handleRowSelectChange(field, value) {
                this.$emit("row-select-change",{property: field.property, value: value});
            },
            refreshDisplayColumnList() {
                this.computeStyleList();
                this.filtedList = [];
                for (let column of this.styleList) {
                    if (column.display) {
                        this.filtedList.push(column);
                    }
                }
            },
            handleInputFocus(value, element) {
                element.srcElement.select();
                this.$emit('inputfocus');
            },
            handleInputBlur() {
                this.$emit('inputblur');
            },
            _fnFocus(name) {
                this.$refs[name][0] && this.$refs[name][0].focus();
            },
            _fnReset(name) {
                this.$refs[name][0] && this.$refs[name][0].reset();
            }
        },
        watch: {
            editing(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.refreshDisplayColumnList();
                }
            },
            columns(newVal, oldVal) {
                if (newVal !== oldVal) {
                    this.refreshDisplayColumnList();
                }
            }
        }
    }
</script>

<style lang="less">
    @import "../assets/css/lj-base.less";

    .cell-row {
        font-size: 15px;
        height: @dictionaryCellHeight;
        min-height: @dictionaryCellHeight;
    }
    .cell-row label{
        font-weight: bold;
        margin:0;
        width: 60px;
        flex: 0 0 60px;
        text-align-last: justify;
        margin-right: 10px;
    }
    .cell-row.readonly label{
        color: @secondary;
    }
    input.weui-input {
        padding: 1px 0;
    }
</style>