123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410 |
- <!--以一行一个字段的形式展示对象信息-->
- <!--文档-->
- <!--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"> {{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>
|