eoss-mobiles 0.4.1 → 0.4.2

package/packages/table-column/src/main.vue

@@ -1,931 +1,931 @@
-<template>
-  <el-table-column
-    v-if="showTemplate(item) && show"
-    v-show="!item.hide"
-    :label="item.title || item.label"
-    :prop="item.field || item.prop"
-    :fixed="item.fixed"
-    :sortable="item.sortable || item.sort"
-    :column-key="item.columnKey"
-    :width="item.width"
-    :min-width="item.minWidth"
-    :render-header="item.renderHeader"
-    :sort-method="item.sortMethod"
-    :sort-by="item.sortBy"
-    :sort-orders="item.sortOrders"
-    :resizable="item.resizable"
-    :formatter="item.formatter"
-    :show-overflow-tooltip="item.showOverflowTooltip"
-    :align="item.align"
-    :header-align="item.headerAlign"
-    :selectable="item.selectable"
-    :reserve-selection="item.reserveSelection"
-    :filters="item.filters"
-    :filter-placement="item.filterPlacement"
-    :filter-multiple="item.filterMultiple"
-    :filter-method="item.filterMethod"
-    :filtered-value="item.filteredValue"
-    :colspan="item.colspan"
-    :rowspan="item.rowspan"
-    :total="item.total"
-  >
-    <template slot-scope="scope">
-      <template v-if="form && item.type !== 'handle'">
-        <template v-if="isReadOnly(item, scope)">
-          <expand-dom
-            v-if="item.render"
-            :column="item"
-            :row="scope.row"
-            :render="item.render"
-            :index="index"
-          >
-          </expand-dom>
-          <template v-else>{{ format(scope.row, item) }}</template>
-        </template>
-        <template v-else>
-          <section v-if="item.type === 'slot'">
-            <slot :name="item.prop"></slot>
-          </section>
-          <em-picker
-            v-if="item.type === 'select'"
-            :valueKey="
-              item.valueKey
-                ? item.valueKey
-                : !item.url && !item.sysAppCode
-                ? 'value'
-                : 'cciValue'
-            "
-            :labelKey="
-              item.labelKey
-                ? item.labelKey
-                : !item.url && !item.sysAppCode
-                ? 'name'
-                : 'shortName'
-            "
-            v-bind="
-              exclAttribute({
-                data: item,
-                attrs: ['width', 'sysAppCode', 'url']
-              })
-            "
-            :sysAppCode="
-              item.sysAppCode &&
-              scope.$index == 0 &&
-              !optionList[item.name || item.field || item.prop]
-                ? item.sysAppCode
-                : ''
-            "
-            :url="
-              item.url &&
-              scope.$index == 0 &&
-              !optionList[item.name || item.field || item.prop]
-                ? item.url
-                : ''
-            "
-            v-model="scope.row[item.name || item.field || item.prop]"
-            hideLabel
-            :columns="
-              optionList[item.name || item.field || item.prop]
-                ? optionList[item.name || item.field || item.prop]
-                : newOptionData[item.name || item.field || item.prop]
-            "
-            @confirm="
-              value => {
-                handleChange({
-                  name: item.name || item.field || item.prop,
-                  value: value,
-                  data: scope.row
-                });
-              }
-            "
-          />
-          <template
-            v-else-if="
-              item.type === 'text' ||
-                item.type === 'textarea' ||
-                item.type == 'number' ||
-                item.type == 'digit'
-            "
-          >
-            <template v-if="item.lazy">
-              <input
-                v-if="item.type === 'text'"
-                ref="emInput"
-                class="el-input__inner"
-                :label="item.title"
-                v-bind="exclAttribute({ data: item, attrs: 'width' })"
-                v-model.lazy="scope.row[item.name || item.field || item.prop]"
-                @blur="
-                  event => {
-                    handleBlur({ item: item, event: event, data: scope.row });
-                  }
-                "
-                @focus="
-                  event => {
-                    handleFocus({
-                      item: item,
-                      event: event,
-                      data: scope.row
-                    });
-                  }
-                "
-                @change="
-                  value => {
-                    handleChange({
-                      name: item.name || item.field || item.prop,
-                      value: value,
-                      data: scope.row
-                    });
-                  }
-                "
-              />
-              <textarea
-                v-else
-                class="el-textarea__inner"
-                v-bind="exclAttribute({ data: item, attrs: 'width' })"
-                v-model.lazy="scope.row[item.name || item.field || item.prop]"
-                @blur="
-                  event => {
-                    handleBlur({ item: item, event: event, data: scope.row });
-                  }
-                "
-                @focus="
-                  event => {
-                    handleFocus({
-                      item: item,
-                      event: event,
-                      data: scope.row
-                    });
-                  }
-                "
-                @change="
-                  value => {
-                    handleChange({
-                      name: item.name || item.field || item.prop,
-                      value: value,
-                      data: scope.row
-                    });
-                  }
-                "
-              ></textarea>
-            </template>
-            <em-input
-              v-else
-              ref="emInput"
-              class="em-table-input"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.name || item.field || item.prop]"
-              :label="item.title"
-              hideLabel
-              @blur="
-                event => {
-                  handleBlur({ item: item, event: event, data: scope.row });
-                }
-              "
-              @focus="
-                event => {
-                  handleFocus({ item: item, event: event, data: scope.row });
-                }
-              "
-              @change="
-                value => {
-                  handleChange({
-                    name: item.name || item.field || item.prop,
-                    value: value,
-                    data: scope.row
-                  });
-                }
-              "
-            ></em-input>
-          </template>
-          <em-date
-            v-else-if="
-              item.date ||
-                item.type == 'date' ||
-                item.type == 'year' ||
-                item.type == 'year-month' ||
-                item.type == 'month-day' ||
-                item.type == 'time' ||
-                item.type == 'datetimeSecond' ||
-                item.type == 'datetime' ||
-                item.type == 'datehour'
-            "
-            v-bind="exclAttribute({ data: item, attrs: 'width' })"
-            v-model="scope.row[item.name || item.field || item.prop]"
-            hideLabel
-            :joinStr="item.joinStr || '-'"
-            @confirm="
-              value => {
-                handleChange({
-                  name: item.name || item.field || item.prop,
-                  value: value,
-                  data: scope.row
-                });
-              }
-            "
-          />
-          <em-radio-group
-            v-else-if="item.type === 'radio'"
-            v-bind="exclAttribute({ data: item, attrs: ['width'] })"
-            v-model="scope.row[item.name || item.field || item.prop]"
-            :data="
-              optionList[item.name || item.field || item.prop] ||
-                newOptionData[item.name || item.field || item.prop]
-            "
-            :valueKey="
-              item.valueKey
-                ? item.valueKey
-                : !item.url && !item.sysAppCode
-                ? 'value'
-                : 'cciValue'
-            "
-            :labelKey="
-              item.labelKey
-                ? item.labelKey
-                : !item.url && !item.sysAppCode
-                ? 'name'
-                : 'shortName'
-            "
-            :sysAppCode="
-              item.sysAppCode &&
-              scope.$index == 0 &&
-              !optionList[item.name || item.field || item.prop]
-                ? item.sysAppCode
-                : ''
-            "
-            :url="
-              item.url &&
-              scope.$index == 0 &&
-              !optionList[item.name || item.field || item.prop]
-                ? item.url
-                : ''
-            "
-            @change="
-              value => {
-                handleChange({
-                  name: item.name || item.field || item.prop,
-                  value: value,
-                  data: scope.row,
-                  type: item.type
-                });
-              }
-            "
-          />
-          <em-checkbox-group
-            v-else-if="item.type === 'checkbox'"
-            v-bind="exclAttribute({ data: item, attrs: 'width' })"
-            v-model="scope.row[item.name || item.field || item.prop]"
-            :data="
-              optionList[item.name || item.field || item.prop] ||
-                newOptionData[item.name || item.field || item.prop]
-            "
-            :valueKey="
-              item.valueKey
-                ? item.valueKey
-                : !item.url && !item.sysAppCode
-                ? 'value'
-                : 'cciValue'
-            "
-            :labelKey="
-              item.labelKey
-                ? item.labelKey
-                : !item.url && !item.sysAppCode
-                ? 'name'
-                : 'shortName'
-            "
-            :sysAppCode="
-              item.sysAppCode &&
-              scope.$index == 0 &&
-              !optionList[item.name || item.field || item.prop]
-                ? item.sysAppCode
-                : ''
-            "
-            :url="
-              item.url &&
-              scope.$index == 0 &&
-              !optionList[item.name || item.field || item.prop]
-                ? item.url
-                : ''
-            "
-            @change="
-              value => {
-                handleChange({
-                  name: item.name || item.field || item.prop,
-                  value: value,
-                  data: scope.row,
-                  type: item.type
-                });
-              }
-            "
-          />
-          <em-switch
-            v-else-if="item.type === 'switch'"
-            v-bind="exclAttribute({ data: item, attrs: 'width' })"
-            v-model="scope.row[item.name || item.field || item.prop]"
-            @change="
-              value => {
-                handleChange({
-                  name: item.name || item.field || item.prop,
-                  value: value,
-                  data: scope.row
-                });
-              }
-            "
-          />
-          <em-selector
-            v-else-if="item.type == 'selector'"
-            v-bind="exclAttribute({ data: item, attrs: 'width' })"
-            v-model="scope.row[item.name || item.field || item.prop]"
-            :label="item.title"
-            hide-label
-            @change="
-              value => {
-                handleChange({
-                  name: item.name || item.field || item.prop,
-                  value: value.list,
-                  data: scope.row
-                });
-              }
-            "
-          />
-          <!-- <el-form-item
-            :name="name"
-            :prop="item.field"
-            :rules="item.rules"
-            :index="scope.$index"
-            v-else
-          >
-            
-            <es-cascader
-              v-else-if="item.type == 'cascader'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              :data="
-                item.optionData
-                  ? scope.row[item.optionData]
-                  : optionData[item.field || item.prop]
-              "
-              @blur="
-                event => {
-                  handleBlur({ item: item, event: event, data: scope.row });
-                }
-              "
-              @focus="
-                event => {
-                  handleFocus({ item: item, event: event, data: scope.row });
-                }
-              "
-              @change="
-                value => {
-                  handleChange({
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row
-                  });
-                }
-              "
-            >
-            </es-cascader>
-            <es-select-ganged
-              v-else-if="item.type === 'ganged'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              :data="
-                item.optionData
-                  ? scope.row[item.optionData]
-                  : optionData[item.field || item.prop]
-              "
-              @change="
-                value => {
-                  handleChange({
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row
-                  });
-                }
-              "
-            ></es-select-ganged>
-            <es-checkbox-group
-              v-else-if="item.type === 'checkbox'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              :data="optionData[item.field || item.prop]"
-              :ajax="false"
-              @change="
-                value => {
-                  handleChange({
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row
-                  });
-                }
-              "
-            ></es-checkbox-group>
-            <es-switch
-              v-else-if="item.type === 'switch'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              :data="optionData[item.field || item.prop]"
-              @change="
-                value => {
-                  handleChange({
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row
-                  });
-                }
-              "
-            ></es-switch>
-            <es-date-picker
-              v-else-if="
-                item.date ||
-                  item.type == 'date' ||
-                  item.type == 'year' ||
-                  item.type == 'month' ||
-                  item.type == 'date' ||
-                  item.type == 'dates' ||
-                  item.type == 'week' ||
-                  item.type == 'datetime' ||
-                  item.type == 'datetimerange' ||
-                  item.type == 'daterange' ||
-                  item.type == 'monthrange' ||
-                  item.type == 'quarter' ||
-                  item.type == 'halfyear'
-              "
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              @blur="
-                event => {
-                  handleBlur({ item: item, event: event, data: scope.row });
-                }
-              "
-              @focus="
-                event => {
-                  handleFocus({ item: item, event: event, data: scope.row });
-                }
-              "
-              @change="
-                value => {
-                  handleChange({
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row
-                  });
-                }
-              "
-            ></es-date-picker>
-            <es-input-number
-              v-else-if="item.type == 'number'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              @blur="
-                event => {
-                  handleBlur({ item: item, event: event, data: scope.row });
-                }
-              "
-              @focus="
-                event => {
-                  handleFocus({ item: item, event: event, data: scope.row });
-                }
-              "
-              @change="
-                value => {
-                  handleChange({
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row
-                  });
-                }
-              "
-            ></es-input-number>
-            <es-selector
-              v-else-if="item.type == 'selector'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              @change="
-                value => {
-                  handleChange({
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row
-                  });
-                }
-              "
-            ></es-selector>
-            <template
-              v-else-if="item.type === 'text' || item.type === 'textarea'"
-            >
-              <template v-if="item.lazy">
-                <input
-                  v-if="item.type === 'text'"
-                  class="el-input__inner"
-                  v-bind="exclAttribute({ data: item, attrs: 'width' })"
-                  v-model.lazy="scope.row[item.field]"
-                  @blur="
-                    event => {
-                      handleBlur({ item: item, event: event, data: scope.row });
-                    }
-                  "
-                  @focus="
-                    event => {
-                      handleFocus({
-                        item: item,
-                        event: event,
-                        data: scope.row
-                      });
-                    }
-                  "
-                  @change="
-                    value => {
-                      handleChange({
-                        name: item.field || item.prop,
-                        value: value,
-                        data: scope.row
-                      });
-                    }
-                  "
-                />
-                <textarea
-                  v-else
-                  class="el-textarea__inner"
-                  v-bind="exclAttribute({ data: item, attrs: 'width' })"
-                  v-model.lazy="scope.row[item.field]"
-                  @blur="
-                    event => {
-                      handleBlur({ item: item, event: event, data: scope.row });
-                    }
-                  "
-                  @focus="
-                    event => {
-                      handleFocus({
-                        item: item,
-                        event: event,
-                        data: scope.row
-                      });
-                    }
-                  "
-                  @change="
-                    value => {
-                      handleChange({
-                        name: item.field || item.prop,
-                        value: value,
-                        data: scope.row
-                      });
-                    }
-                  "
-                ></textarea>
-              </template>
-              <es-input
-                v-else
-                v-bind="exclAttribute({ data: item, attrs: 'width' })"
-                v-model="scope.row[item.field]"
-                @blur="
-                  event => {
-                    handleBlur({ item: item, event: event, data: scope.row });
-                  }
-                "
-                @focus="
-                  event => {
-                    handleFocus({ item: item, event: event, data: scope.row });
-                  }
-                "
-                @change="
-                  value => {
-                    handleChange({
-                      name: item.field || item.prop,
-                      value: value,
-                      data: scope.row
-                    });
-                  }
-                "
-              ></es-input>
-            </template>
-          </el-form-item> -->
-        </template>
-      </template>
-      <!-- 按钮区域 -->
-      <em-button-group
-        v-if="item.type === 'handle' && !scope.row.hideHandle"
-        :size="item.size"
-        :contents="item.contents || item.events"
-        :data="scope.row"
-        @click="handleClick"
-      ></em-button-group>
-    </template>
-  </el-table-column>
-  <el-table-column
-    v-else-if="show"
-    v-show="!item.hide"
-    :key="index"
-    :label="item.title || item.label"
-    :prop="item.field || item.prop"
-    :fixed="item.fixed"
-    :sortable="item.sortable || item.sort"
-    :index="item.index"
-    :column-key="item.columnKey"
-    :width="item.width"
-    :min-width="item.minWidth"
-    :render-header="item.renderHeader"
-    :sort-method="item.sortMethod"
-    :sort-by="item.sortBy"
-    :sort-orders="item.sortOrders"
-    :resizable="item.resizable"
-    :formatter="item.formatter"
-    :show-overflow-tooltip="item.showOverflowTooltip"
-    :align="item.align"
-    :header-align="item.headerAlign"
-    :class-name="item.className"
-    :label-class-name="item.labelClassName"
-    :selectable="item.selectable"
-    :reserve-selection="item.reserveSelection"
-    :filters="item.filters"
-    :filter-placement="item.filterPlacement"
-    :filter-multiple="item.filterMultiple"
-    :filter-method="item.filterMethod"
-    :filtered-value="item.filteredValue"
-    :colspan="item.colspan"
-    :rowspan="item.rowspan"
-    :total="item.total"
-  >
-    <slot></slot>
-    <template slot-scope="scope">
-      <expand-dom
-        v-if="item.render"
-        :column="item"
-        :row="scope.row"
-        :render="item.render"
-        :index="index"
-      >
-        <!-- {{ item.render(scope.row) }} -->
-      </expand-dom>
-      <template v-else
-        ><div
-          v-html="
-            item.formatDate
-              ? formatDate(
-                  scope.row[item.name || item.field || item.prop],
-                  item.formatDate
-                )
-              : getValue(scope.row)
-          "
-        ></div
-      ></template>
-    </template>
-  </el-table-column>
-</template>
-
-<script>
-import { TableColumn } from 'element-ui';
-import util from 'eoss-mobile/src/utils/util';
-import { findSysCode } from '../../../src/config/api';
-import tableMixin from './mixins/table';
-import request from '../../../src/utils/http.js';
-export default {
-  name: 'EmTableColumn',
-  components: { TableColumn,expandDom: {
-      functional: true,
-      props: {
-        row: Object,
-        render: [Function, String],
-        index: Number,
-        column: {
-          type: Object,
-          default: null
-        }
-      },
-      render: (h, ctx) => {
-        const params = {
-          row: ctx.props.row,
-          index: ctx.props.index
-        };
-        if (ctx.props.column) {
-          params.column = ctx.props.column;
-        }
-        if (typeof ctx.props.render == 'string') {
-          try {
-            return util.toFunction(ctx.props.render)(h, params);
-          } catch (error) {
-            throw error;
-          }
-        }
-        return ctx.props.render(h, params);
-      }
-    } },
-  inheritAttrs: false,
-  mixins: [tableMixin],
-  props: {
-    item: {
-      type: Object,
-      default() {
-        return {};
-      }
-    },
-    readonly: Boolean,
-    index: Number,
-    form: {
-      type: Boolean,
-      default: false
-    },
-    optionData: {
-      type: Object,
-      default() {
-        return {};
-      }
-    }
-  },
-  data() {
-    return {
-      show: true,
-      isSelect: false,
-      selectStr: '',
-      optionList: {}
-    };
-  },
-  mounted() {
-    const { field, prop, name, url, sysAppCode } = this.item;
-    this.selectStr.indexOf(sysAppCode) != -1 && (this.isSelect = false);
-    if ((sysAppCode || url) && !this.isSelect) {
-      this.optionList[name || field || prop] = [];
-      this.getSelectValue(this.item);
-      this.selectStr += sysAppCode;
-      this.isSelect = true;
-    }
-  },
-  computed: {
-    newOptionData(field) {
-      let data = JSON.parse(JSON.stringify(this.optionData));
-      // if (field) return this.optionData[field] || [];
-
-      return data;
-    }
-  },
-  methods: {
-    getSelectValue(item) {
-      let params = {
-        url: item.baseUrl
-          ? item.baseUrl + (item.url || findSysCode)
-          : item.url || findSysCode,
-        type: item.method || 'get',
-        params: {
-          ccCode: item.sysAppCode,
-          pageIndex: 1,
-          ...item.param
-        }
-      };
-      request(params).then(res => {
-        const { data, status, results, rCode } = res;
-        if (status === 'success' || rCode === 0) {
-          this.optionList[
-            item.name || item.field || item.prop
-          ] = item.resultsName
-            ? data
-              ? data[item.resultsName]
-              : results[item.resultsName]
-            : data
-            ? data
-            : results;
-          this.show = false;
-          setTimeout(() => {
-            this.show = true;
-          }, 0);
-        }
-      });
-    },
-    getValue(row) {
-      let str;
-      const { field, prop, valueKey, labelKey, type } = this.item;
-      if (this.newOptionData[field || prop]) {
-        if (Array.isArray(row[field || prop])) {
-          let val = [];
-          this.newOptionData[field || prop].map(x => {
-            row[field || prop].filter(j => {
-              if (typeof j == 'object') {
-                if (j[valueKey || 'value'] == x[valueKey || 'value']) {
-                  val.push(x[labelKey || 'name']);
-                }
-              } else {
-                if (j == x[valueKey || 'value']) {
-                  val.push(x[labelKey || 'name']);
-                }
-              }
-            });
-          });
-          str = val.join(',');
-        } else {
-          let val = this.newOptionData[field || prop].filter(
-            x => row[field || prop] == x[valueKey || 'value']
-          );
-          if (val.length > 0) {
-            str = val[0][labelKey || 'name'];
-          }
-        }
-      } else if (type === 'select') {
-        const { name, labelKey, field, prop, valueKey, optionData } = this.item;
-        if (this.optionList[name || field || prop]) {
-          let value = this.optionList[name || field || prop].filter(
-            x => x[valueKey || 'cciValue'] === row[name || field || prop]
-          );
-          if (value.length > 0) {
-            str = value[0][labelKey || 'shortName'];
-          } else {
-            str = '-';
-          }
-        } else if (optionData) {
-          let value = optionData.filter(
-            x => x[valueKey || 'cciValue'] === row[name || field || prop]
-          );
-          if (value.length > 0) {
-            str = value[0][labelKey || 'shortName'];
-          } else {
-            str = '-';
-          }
-        } else {
-          str = row[name || field || prop];
-        }
-      } else if (typeof row[field || prop] == 'string') {
-        str = row[field || prop];
-      } else if (type == 'number' || typeof row[field || prop] == 'number') {
-        str = row[field || prop];
-      } else {
-        if (
-          Array.isArray(row[field || prop]) &&
-          row[field || prop].length == 0
-        ) {
-          str = '';
-        } else {
-          // str = row[field || prop] ? '是' : '否';
-          str = row[field || prop] ? row[field || prop]  : '';
-        }
-      }
-      return str;
-    },
-    formatDate(date, fmt) {
-      return util.formatDate(date, fmt);
-    },
-    getTableColumns(info, name) {
-      if (this.newOptionData[name]) return;
-      this.show = false;
-      this.newOptionData[name] = info;
-      setTimeout(() => {
-        this.show = true;
-      }, 0);
-    },
-    handleBlur(data) {
-      this.$emit('formBlur', data);
-    },
-    handleFocus(data) {
-      this.$emit('formFocus', data);
-    },
-    handleChange(data) {
-      let newData;
-      if (typeof data.value == 'object' && data.value.srcElement) {
-        newData = data.value.srcElement._value;
-        data.value = newData;
-      }
-      this.$emit('formChange', data);
-    },
-    handleClick(data) {
-      this.$emit('handleClick', data);
-    },
-    exclAttribute({ data, attrs }) {
-      return util.exclAttribute({ data, attrs });
-    },
-    handleClick(res) {
-      this.$emit('handleClick', res);
-    },
-    isReadOnly(item, scope) {
-      return (
-        scope.row.canEdit === false ||
-        this.readonly ||
-        item.editable === false ||
-        (scope.row.cantEditKey &&
-          scope.row.cantEditKey.indexOf(item.field || item.prop) > -1) ||
-        item.readonly
-      );
-    },
-    format(rows, col) {
-      const field = col.field || col.prop;
-      if (util.isObject(rows[field])) {
-        return (
-          rows[field][col.labelKey] ||
-          rows[field]['name'] ||
-          rows[field]['label']
-        );
-      }
-      if (Array.isArray(rows[field])) {
-        const vals = rows[field].map(item => {
-          if (util.isObject(item)) {
-            return item[col.labelKey || 'name' || 'label'];
-          } else {
-            return item;
-          }
-        });
-        return vals.join(col.symbol ? col.symbol : '-');
-      }
-      return rows[field];
-    }
-  }
-};
-</script>
-
-<style></style>
+<template>
+  <el-table-column
+    v-if="showTemplate(item) && show"
+    v-show="!item.hide"
+    :label="item.title || item.label"
+    :prop="item.field || item.prop"
+    :fixed="item.fixed"
+    :sortable="item.sortable || item.sort"
+    :column-key="item.columnKey"
+    :width="item.width"
+    :min-width="item.minWidth"
+    :render-header="item.renderHeader"
+    :sort-method="item.sortMethod"
+    :sort-by="item.sortBy"
+    :sort-orders="item.sortOrders"
+    :resizable="item.resizable"
+    :formatter="item.formatter"
+    :show-overflow-tooltip="item.showOverflowTooltip"
+    :align="item.align"
+    :header-align="item.headerAlign"
+    :selectable="item.selectable"
+    :reserve-selection="item.reserveSelection"
+    :filters="item.filters"
+    :filter-placement="item.filterPlacement"
+    :filter-multiple="item.filterMultiple"
+    :filter-method="item.filterMethod"
+    :filtered-value="item.filteredValue"
+    :colspan="item.colspan"
+    :rowspan="item.rowspan"
+    :total="item.total"
+  >
+    <template slot-scope="scope">
+      <template v-if="form && item.type !== 'handle'">
+        <template v-if="isReadOnly(item, scope)">
+          <expand-dom
+            v-if="item.render"
+            :column="item"
+            :row="scope.row"
+            :render="item.render"
+            :index="index"
+          >
+          </expand-dom>
+          <template v-else>{{ format(scope.row, item) }}</template>
+        </template>
+        <template v-else>
+          <section v-if="item.type === 'slot'">
+            <slot :name="item.prop"></slot>
+          </section>
+          <em-picker
+            v-if="item.type === 'select'"
+            :valueKey="
+              item.valueKey
+                ? item.valueKey
+                : !item.url && !item.sysAppCode
+                ? 'value'
+                : 'cciValue'
+            "
+            :labelKey="
+              item.labelKey
+                ? item.labelKey
+                : !item.url && !item.sysAppCode
+                ? 'name'
+                : 'shortName'
+            "
+            v-bind="
+              exclAttribute({
+                data: item,
+                attrs: ['width', 'sysAppCode', 'url']
+              })
+            "
+            :sysAppCode="
+              item.sysAppCode &&
+              scope.$index == 0 &&
+              !optionList[item.name || item.field || item.prop]
+                ? item.sysAppCode
+                : ''
+            "
+            :url="
+              item.url &&
+              scope.$index == 0 &&
+              !optionList[item.name || item.field || item.prop]
+                ? item.url
+                : ''
+            "
+            v-model="scope.row[item.name || item.field || item.prop]"
+            hideLabel
+            :columns="
+              optionList[item.name || item.field || item.prop]
+                ? optionList[item.name || item.field || item.prop]
+                : newOptionData[item.name || item.field || item.prop]
+            "
+            @confirm="
+              value => {
+                handleChange({
+                  name: item.name || item.field || item.prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          />
+          <template
+            v-else-if="
+              item.type === 'text' ||
+                item.type === 'textarea' ||
+                item.type == 'number' ||
+                item.type == 'digit'
+            "
+          >
+            <template v-if="item.lazy">
+              <input
+                v-if="item.type === 'text'"
+                ref="emInput"
+                class="el-input__inner"
+                :label="item.title"
+                v-bind="exclAttribute({ data: item, attrs: 'width' })"
+                v-model.lazy="scope.row[item.name || item.field || item.prop]"
+                @blur="
+                  event => {
+                    handleBlur({ item: item, event: event, data: scope.row });
+                  }
+                "
+                @focus="
+                  event => {
+                    handleFocus({
+                      item: item,
+                      event: event,
+                      data: scope.row
+                    });
+                  }
+                "
+                @change="
+                  value => {
+                    handleChange({
+                      name: item.name || item.field || item.prop,
+                      value: value,
+                      data: scope.row
+                    });
+                  }
+                "
+              />
+              <textarea
+                v-else
+                class="el-textarea__inner"
+                v-bind="exclAttribute({ data: item, attrs: 'width' })"
+                v-model.lazy="scope.row[item.name || item.field || item.prop]"
+                @blur="
+                  event => {
+                    handleBlur({ item: item, event: event, data: scope.row });
+                  }
+                "
+                @focus="
+                  event => {
+                    handleFocus({
+                      item: item,
+                      event: event,
+                      data: scope.row
+                    });
+                  }
+                "
+                @change="
+                  value => {
+                    handleChange({
+                      name: item.name || item.field || item.prop,
+                      value: value,
+                      data: scope.row
+                    });
+                  }
+                "
+              ></textarea>
+            </template>
+            <em-input
+              v-else
+              ref="emInput"
+              class="em-table-input"
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              v-model="scope.row[item.name || item.field || item.prop]"
+              :label="item.title"
+              hideLabel
+              @blur="
+                event => {
+                  handleBlur({ item: item, event: event, data: scope.row });
+                }
+              "
+              @focus="
+                event => {
+                  handleFocus({ item: item, event: event, data: scope.row });
+                }
+              "
+              @change="
+                value => {
+                  handleChange({
+                    name: item.name || item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            ></em-input>
+          </template>
+          <em-date
+            v-else-if="
+              item.date ||
+                item.type == 'date' ||
+                item.type == 'year' ||
+                item.type == 'year-month' ||
+                item.type == 'month-day' ||
+                item.type == 'time' ||
+                item.type == 'datetimeSecond' ||
+                item.type == 'datetime' ||
+                item.type == 'datehour'
+            "
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.name || item.field || item.prop]"
+            hideLabel
+            :joinStr="item.joinStr || '-'"
+            @confirm="
+              value => {
+                handleChange({
+                  name: item.name || item.field || item.prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          />
+          <em-radio-group
+            v-else-if="item.type === 'radio'"
+            v-bind="exclAttribute({ data: item, attrs: ['width'] })"
+            v-model="scope.row[item.name || item.field || item.prop]"
+            :data="
+              optionList[item.name || item.field || item.prop] ||
+                newOptionData[item.name || item.field || item.prop]
+            "
+            :valueKey="
+              item.valueKey
+                ? item.valueKey
+                : !item.url && !item.sysAppCode
+                ? 'value'
+                : 'cciValue'
+            "
+            :labelKey="
+              item.labelKey
+                ? item.labelKey
+                : !item.url && !item.sysAppCode
+                ? 'name'
+                : 'shortName'
+            "
+            :sysAppCode="
+              item.sysAppCode &&
+              scope.$index == 0 &&
+              !optionList[item.name || item.field || item.prop]
+                ? item.sysAppCode
+                : ''
+            "
+            :url="
+              item.url &&
+              scope.$index == 0 &&
+              !optionList[item.name || item.field || item.prop]
+                ? item.url
+                : ''
+            "
+            @change="
+              value => {
+                handleChange({
+                  name: item.name || item.field || item.prop,
+                  value: value,
+                  data: scope.row,
+                  type: item.type
+                });
+              }
+            "
+          />
+          <em-checkbox-group
+            v-else-if="item.type === 'checkbox'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.name || item.field || item.prop]"
+            :data="
+              optionList[item.name || item.field || item.prop] ||
+                newOptionData[item.name || item.field || item.prop]
+            "
+            :valueKey="
+              item.valueKey
+                ? item.valueKey
+                : !item.url && !item.sysAppCode
+                ? 'value'
+                : 'cciValue'
+            "
+            :labelKey="
+              item.labelKey
+                ? item.labelKey
+                : !item.url && !item.sysAppCode
+                ? 'name'
+                : 'shortName'
+            "
+            :sysAppCode="
+              item.sysAppCode &&
+              scope.$index == 0 &&
+              !optionList[item.name || item.field || item.prop]
+                ? item.sysAppCode
+                : ''
+            "
+            :url="
+              item.url &&
+              scope.$index == 0 &&
+              !optionList[item.name || item.field || item.prop]
+                ? item.url
+                : ''
+            "
+            @change="
+              value => {
+                handleChange({
+                  name: item.name || item.field || item.prop,
+                  value: value,
+                  data: scope.row,
+                  type: item.type
+                });
+              }
+            "
+          />
+          <em-switch
+            v-else-if="item.type === 'switch'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.name || item.field || item.prop]"
+            @change="
+              value => {
+                handleChange({
+                  name: item.name || item.field || item.prop,
+                  value: value,
+                  data: scope.row
+                });
+              }
+            "
+          />
+          <em-selector
+            v-else-if="item.type == 'selector'"
+            v-bind="exclAttribute({ data: item, attrs: 'width' })"
+            v-model="scope.row[item.name || item.field || item.prop]"
+            :label="item.title"
+            hide-label
+            @change="
+              value => {
+                handleChange({
+                  name: item.name || item.field || item.prop,
+                  value: value.list,
+                  data: scope.row
+                });
+              }
+            "
+          />
+          <!-- <el-form-item
+            :name="name"
+            :prop="item.field"
+            :rules="item.rules"
+            :index="scope.$index"
+            v-else
+          >
+            
+            <es-cascader
+              v-else-if="item.type == 'cascader'"
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              v-model="scope.row[item.field]"
+              :data="
+                item.optionData
+                  ? scope.row[item.optionData]
+                  : optionData[item.field || item.prop]
+              "
+              @blur="
+                event => {
+                  handleBlur({ item: item, event: event, data: scope.row });
+                }
+              "
+              @focus="
+                event => {
+                  handleFocus({ item: item, event: event, data: scope.row });
+                }
+              "
+              @change="
+                value => {
+                  handleChange({
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            >
+            </es-cascader>
+            <es-select-ganged
+              v-else-if="item.type === 'ganged'"
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              v-model="scope.row[item.field]"
+              :data="
+                item.optionData
+                  ? scope.row[item.optionData]
+                  : optionData[item.field || item.prop]
+              "
+              @change="
+                value => {
+                  handleChange({
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            ></es-select-ganged>
+            <es-checkbox-group
+              v-else-if="item.type === 'checkbox'"
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              v-model="scope.row[item.field]"
+              :data="optionData[item.field || item.prop]"
+              :ajax="false"
+              @change="
+                value => {
+                  handleChange({
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            ></es-checkbox-group>
+            <es-switch
+              v-else-if="item.type === 'switch'"
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              v-model="scope.row[item.field]"
+              :data="optionData[item.field || item.prop]"
+              @change="
+                value => {
+                  handleChange({
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            ></es-switch>
+            <es-date-picker
+              v-else-if="
+                item.date ||
+                  item.type == 'date' ||
+                  item.type == 'year' ||
+                  item.type == 'month' ||
+                  item.type == 'date' ||
+                  item.type == 'dates' ||
+                  item.type == 'week' ||
+                  item.type == 'datetime' ||
+                  item.type == 'datetimerange' ||
+                  item.type == 'daterange' ||
+                  item.type == 'monthrange' ||
+                  item.type == 'quarter' ||
+                  item.type == 'halfyear'
+              "
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              v-model="scope.row[item.field]"
+              @blur="
+                event => {
+                  handleBlur({ item: item, event: event, data: scope.row });
+                }
+              "
+              @focus="
+                event => {
+                  handleFocus({ item: item, event: event, data: scope.row });
+                }
+              "
+              @change="
+                value => {
+                  handleChange({
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            ></es-date-picker>
+            <es-input-number
+              v-else-if="item.type == 'number'"
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              v-model="scope.row[item.field]"
+              @blur="
+                event => {
+                  handleBlur({ item: item, event: event, data: scope.row });
+                }
+              "
+              @focus="
+                event => {
+                  handleFocus({ item: item, event: event, data: scope.row });
+                }
+              "
+              @change="
+                value => {
+                  handleChange({
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            ></es-input-number>
+            <es-selector
+              v-else-if="item.type == 'selector'"
+              v-bind="exclAttribute({ data: item, attrs: 'width' })"
+              v-model="scope.row[item.field]"
+              @change="
+                value => {
+                  handleChange({
+                    name: item.field || item.prop,
+                    value: value,
+                    data: scope.row
+                  });
+                }
+              "
+            ></es-selector>
+            <template
+              v-else-if="item.type === 'text' || item.type === 'textarea'"
+            >
+              <template v-if="item.lazy">
+                <input
+                  v-if="item.type === 'text'"
+                  class="el-input__inner"
+                  v-bind="exclAttribute({ data: item, attrs: 'width' })"
+                  v-model.lazy="scope.row[item.field]"
+                  @blur="
+                    event => {
+                      handleBlur({ item: item, event: event, data: scope.row });
+                    }
+                  "
+                  @focus="
+                    event => {
+                      handleFocus({
+                        item: item,
+                        event: event,
+                        data: scope.row
+                      });
+                    }
+                  "
+                  @change="
+                    value => {
+                      handleChange({
+                        name: item.field || item.prop,
+                        value: value,
+                        data: scope.row
+                      });
+                    }
+                  "
+                />
+                <textarea
+                  v-else
+                  class="el-textarea__inner"
+                  v-bind="exclAttribute({ data: item, attrs: 'width' })"
+                  v-model.lazy="scope.row[item.field]"
+                  @blur="
+                    event => {
+                      handleBlur({ item: item, event: event, data: scope.row });
+                    }
+                  "
+                  @focus="
+                    event => {
+                      handleFocus({
+                        item: item,
+                        event: event,
+                        data: scope.row
+                      });
+                    }
+                  "
+                  @change="
+                    value => {
+                      handleChange({
+                        name: item.field || item.prop,
+                        value: value,
+                        data: scope.row
+                      });
+                    }
+                  "
+                ></textarea>
+              </template>
+              <es-input
+                v-else
+                v-bind="exclAttribute({ data: item, attrs: 'width' })"
+                v-model="scope.row[item.field]"
+                @blur="
+                  event => {
+                    handleBlur({ item: item, event: event, data: scope.row });
+                  }
+                "
+                @focus="
+                  event => {
+                    handleFocus({ item: item, event: event, data: scope.row });
+                  }
+                "
+                @change="
+                  value => {
+                    handleChange({
+                      name: item.field || item.prop,
+                      value: value,
+                      data: scope.row
+                    });
+                  }
+                "
+              ></es-input>
+            </template>
+          </el-form-item> -->
+        </template>
+      </template>
+      <!-- 按钮区域 -->
+      <em-button-group
+        v-if="item.type === 'handle' && !scope.row.hideHandle"
+        :size="item.size"
+        :contents="item.contents || item.events"
+        :data="scope.row"
+        @click="handleClick"
+      ></em-button-group>
+    </template>
+  </el-table-column>
+  <el-table-column
+    v-else-if="show"
+    v-show="!item.hide"
+    :key="index"
+    :label="item.title || item.label"
+    :prop="item.field || item.prop"
+    :fixed="item.fixed"
+    :sortable="item.sortable || item.sort"
+    :index="item.index"
+    :column-key="item.columnKey"
+    :width="item.width"
+    :min-width="item.minWidth"
+    :render-header="item.renderHeader"
+    :sort-method="item.sortMethod"
+    :sort-by="item.sortBy"
+    :sort-orders="item.sortOrders"
+    :resizable="item.resizable"
+    :formatter="item.formatter"
+    :show-overflow-tooltip="item.showOverflowTooltip"
+    :align="item.align"
+    :header-align="item.headerAlign"
+    :class-name="item.className"
+    :label-class-name="item.labelClassName"
+    :selectable="item.selectable"
+    :reserve-selection="item.reserveSelection"
+    :filters="item.filters"
+    :filter-placement="item.filterPlacement"
+    :filter-multiple="item.filterMultiple"
+    :filter-method="item.filterMethod"
+    :filtered-value="item.filteredValue"
+    :colspan="item.colspan"
+    :rowspan="item.rowspan"
+    :total="item.total"
+  >
+    <slot></slot>
+    <template slot-scope="scope">
+      <expand-dom
+        v-if="item.render"
+        :column="item"
+        :row="scope.row"
+        :render="item.render"
+        :index="index"
+      >
+        <!-- {{ item.render(scope.row) }} -->
+      </expand-dom>
+      <template v-else
+        ><div
+          v-html="
+            item.formatDate
+              ? formatDate(
+                  scope.row[item.name || item.field || item.prop],
+                  item.formatDate
+                )
+              : getValue(scope.row)
+          "
+        ></div
+      ></template>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import { TableColumn } from 'element-ui';
+import util from 'eoss-mobile/src/utils/util';
+import { findSysCode } from '../../../src/config/api';
+import tableMixin from './mixins/table';
+import request from '../../../src/utils/http.js';
+export default {
+  name: 'EmTableColumn',
+  components: { TableColumn,expandDom: {
+      functional: true,
+      props: {
+        row: Object,
+        render: [Function, String],
+        index: Number,
+        column: {
+          type: Object,
+          default: null
+        }
+      },
+      render: (h, ctx) => {
+        const params = {
+          row: ctx.props.row,
+          index: ctx.props.index
+        };
+        if (ctx.props.column) {
+          params.column = ctx.props.column;
+        }
+        if (typeof ctx.props.render == 'string') {
+          try {
+            return util.toFunction(ctx.props.render)(h, params);
+          } catch (error) {
+            throw error;
+          }
+        }
+        return ctx.props.render(h, params);
+      }
+    } },
+  inheritAttrs: false,
+  mixins: [tableMixin],
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    readonly: Boolean,
+    index: Number,
+    form: {
+      type: Boolean,
+      default: false
+    },
+    optionData: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      show: true,
+      isSelect: false,
+      selectStr: '',
+      optionList: {}
+    };
+  },
+  mounted() {
+    const { field, prop, name, url, sysAppCode } = this.item;
+    this.selectStr.indexOf(sysAppCode) != -1 && (this.isSelect = false);
+    if ((sysAppCode || url) && !this.isSelect) {
+      this.optionList[name || field || prop] = [];
+      this.getSelectValue(this.item);
+      this.selectStr += sysAppCode;
+      this.isSelect = true;
+    }
+  },
+  computed: {
+    newOptionData(field) {
+      let data = JSON.parse(JSON.stringify(this.optionData));
+      // if (field) return this.optionData[field] || [];
+
+      return data;
+    }
+  },
+  methods: {
+    getSelectValue(item) {
+      let params = {
+        url: item.baseUrl
+          ? item.baseUrl + (item.url || findSysCode)
+          : item.url || findSysCode,
+        type: item.method || 'get',
+        params: {
+          ccCode: item.sysAppCode,
+          pageIndex: 1,
+          ...item.param
+        }
+      };
+      request(params).then(res => {
+        const { data, status, results, rCode } = res;
+        if (status === 'success' || rCode === 0) {
+          this.optionList[
+            item.name || item.field || item.prop
+          ] = item.resultsName
+            ? data
+              ? data[item.resultsName]
+              : results[item.resultsName]
+            : data
+            ? data
+            : results;
+          this.show = false;
+          setTimeout(() => {
+            this.show = true;
+          }, 0);
+        }
+      });
+    },
+    getValue(row) {
+      let str;
+      const { field, prop, valueKey, labelKey, type } = this.item;
+      if (this.newOptionData[field || prop]) {
+        if (Array.isArray(row[field || prop])) {
+          let val = [];
+          this.newOptionData[field || prop].map(x => {
+            row[field || prop].filter(j => {
+              if (typeof j == 'object') {
+                if (j[valueKey || 'value'] == x[valueKey || 'value']) {
+                  val.push(x[labelKey || 'name']);
+                }
+              } else {
+                if (j == x[valueKey || 'value']) {
+                  val.push(x[labelKey || 'name']);
+                }
+              }
+            });
+          });
+          str = val.join(',');
+        } else {
+          let val = this.newOptionData[field || prop].filter(
+            x => row[field || prop] == x[valueKey || 'value']
+          );
+          if (val.length > 0) {
+            str = val[0][labelKey || 'name'];
+          }
+        }
+      } else if (type === 'select') {
+        const { name, labelKey, field, prop, valueKey, optionData } = this.item;
+        if (this.optionList[name || field || prop]) {
+          let value = this.optionList[name || field || prop].filter(
+            x => x[valueKey || 'cciValue'] === row[name || field || prop]
+          );
+          if (value.length > 0) {
+            str = value[0][labelKey || 'shortName'];
+          } else {
+            str = '-';
+          }
+        } else if (optionData) {
+          let value = optionData.filter(
+            x => x[valueKey || 'cciValue'] === row[name || field || prop]
+          );
+          if (value.length > 0) {
+            str = value[0][labelKey || 'shortName'];
+          } else {
+            str = '-';
+          }
+        } else {
+          str = row[name || field || prop];
+        }
+      } else if (typeof row[field || prop] == 'string') {
+        str = row[field || prop];
+      } else if (type == 'number' || typeof row[field || prop] == 'number') {
+        str = row[field || prop];
+      } else {
+        if (
+          Array.isArray(row[field || prop]) &&
+          row[field || prop].length == 0
+        ) {
+          str = '';
+        } else {
+          // str = row[field || prop] ? '是' : '否';
+          str = row[field || prop] ? row[field || prop]  : '';
+        }
+      }
+      return str;
+    },
+    formatDate(date, fmt) {
+      return util.formatDate(date, fmt);
+    },
+    getTableColumns(info, name) {
+      if (this.newOptionData[name]) return;
+      this.show = false;
+      this.newOptionData[name] = info;
+      setTimeout(() => {
+        this.show = true;
+      }, 0);
+    },
+    handleBlur(data) {
+      this.$emit('formBlur', data);
+    },
+    handleFocus(data) {
+      this.$emit('formFocus', data);
+    },
+    handleChange(data) {
+      let newData;
+      if (typeof data.value == 'object' && data.value.srcElement) {
+        newData = data.value.srcElement._value;
+        data.value = newData;
+      }
+      this.$emit('formChange', data);
+    },
+    handleClick(data) {
+      this.$emit('handleClick', data);
+    },
+    exclAttribute({ data, attrs }) {
+      return util.exclAttribute({ data, attrs });
+    },
+    handleClick(res) {
+      this.$emit('handleClick', res);
+    },
+    isReadOnly(item, scope) {
+      return (
+        scope.row.canEdit === false ||
+        this.readonly ||
+        item.editable === false ||
+        (scope.row.cantEditKey &&
+          scope.row.cantEditKey.indexOf(item.field || item.prop) > -1) ||
+        item.readonly
+      );
+    },
+    format(rows, col) {
+      const field = col.field || col.prop;
+      if (util.isObject(rows[field])) {
+        return (
+          rows[field][col.labelKey] ||
+          rows[field]['name'] ||
+          rows[field]['label']
+        );
+      }
+      if (Array.isArray(rows[field])) {
+        const vals = rows[field].map(item => {
+          if (util.isObject(item)) {
+            return item[col.labelKey || 'name' || 'label'];
+          } else {
+            return item;
+          }
+        });
+        return vals.join(col.symbol ? col.symbol : '-');
+      }
+      return rows[field];
+    }
+  }
+};
+</script>
+
+<style></style>