eoss-mobiles 0.2.11 → 0.2.13

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

@@ -43,114 +43,60 @@
           <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'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              :sysAppCode="
-                item.sysAppCode && scope.$index == 0 ? item.sysAppCode : ''
-              "
-              :url="item.url && scope.$index == 0 ? item.url : ''"
-              @tableColumns="getTableColumns($event, item.field || item.prop)"
-              v-model="scope.row[item.field]"
-              isTable
-              hideLabel
-              :ajax="false"
-              :columns="
-                item.optionData
-                  ? scope.row[item.optionData]
-                  : newOptionData[item.field || item.prop]
-              "
-              @confirm="
-                value => {
-                  handleChange({
-                    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.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>
-              <em-input
-                v-else
+          <section v-if="item.type === 'slot'">
+            <slot :name="item.prop"></slot>
+          </section>
+          <em-picker
+            v-if="item.type === 'select'"
+            valueKey="cciValue"
+            labelKey="shortName"
+            v-bind="
+              exclAttribute({ data: item, attrs: ['width', 'sysAppCode'] })
+            "
+            :sysAppCode="
+              item.sysAppCode &&
+              scope.$index == 0 &&
+              !optionList[item.name || item.field || item.prop]
+                ? item.sysAppCode
+                : ''
+            "
+            :url="item.url && scope.$index == 0 ? item.url : ''"
+            @tableColumns="getTableColumns($event, item.field || item.prop)"
+            v-model="scope.row[item.name || item.field || item.prop]"
+            isTable
+            hideLabel
+            :ajax="false"
+            :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.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="em-table-input"
-                v-bind="exclAttribute({ data: item, attrs: 'width' })"
-                v-model="scope.row[item.field]"
+                class="el-input__inner"
                 :label="item.title"
-                hideLabel
+                v-bind="exclAttribute({ data: item, attrs: 'width' })"
+                v-model.lazy="scope.row[item.field]"
                 @blur="
                   event => {
                     handleBlur({ item: item, event: event, data: scope.row });
@@ -158,7 +104,40 @@
                 "
                 @focus="
                   event => {
-                    handleFocus({ item: item, event: event, data: scope.row });
+                    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="
@@ -170,76 +149,26 @@
                     });
                   }
                 "
-              ></em-input>
+              ></textarea>
             </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'
-              "
+            <em-input
+              v-else
+              ref="emInput"
+              class="em-table-input"
               v-bind="exclAttribute({ data: item, attrs: 'width' })"
               v-model="scope.row[item.field]"
+              :label="item.title"
               hideLabel
-              :joinStr="item.joinStr || '-'"
-              @confirm="
-                value => {
-                  handleChange({
-                    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.field]"
-              :data="newOptionData[item.field || item.prop]"
-              isTable
-              :ajax="false"
-              @tableColumns="getTableColumns($event, item.field || item.prop)"
-              @change="
-                value => {
-                  handleChange({
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row,
-                    type: item.type
-                  });
+              @blur="
+                event => {
+                  handleBlur({ item: item, event: event, data: scope.row });
                 }
               "
-            />
-            <em-checkbox-group
-              v-else-if="item.type === 'checkbox'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              :data="newOptionData[item.field || item.prop]"
-              :ajax="false"
-              isTable
-              @tableColumns="getTableColumns($event, item.field || item.prop)"
-              @change="
-                value => {
-                  handleChange({
-                    name: item.field || item.prop,
-                    value: value,
-                    data: scope.row,
-                    type: item.type
-                  });
+              @focus="
+                event => {
+                  handleFocus({ item: item, event: event, data: scope.row });
                 }
               "
-            />
-            <em-switch
-              v-else-if="item.type === 'switch'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
               @change="
                 value => {
                   handleChange({
@@ -249,24 +178,103 @@
                   });
                 }
               "
-            />
-            <em-selector
-              v-else-if="item.type == 'selector'"
-              v-bind="exclAttribute({ data: item, attrs: 'width' })"
-              v-model="scope.row[item.field]"
-              :label="item.title"
-              hide-label
-              @change="
-                value => {
-                  handleChange({
-                    name: item.field || item.prop,
-                    value: value.list,
-                    data: scope.row
-                  });
-                }
-              "
-            />
-            <!-- <el-form-item
+            ></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.field]"
+            hideLabel
+            :joinStr="item.joinStr || '-'"
+            @confirm="
+              value => {
+                handleChange({
+                  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.field]"
+            :data="newOptionData[item.field || item.prop]"
+            isTable
+            :ajax="false"
+            @tableColumns="getTableColumns($event, item.field || item.prop)"
+            @change="
+              value => {
+                handleChange({
+                  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.field]"
+            :data="newOptionData[item.field || item.prop]"
+            :ajax="false"
+            isTable
+            @tableColumns="getTableColumns($event, item.field || item.prop)"
+            @change="
+              value => {
+                handleChange({
+                  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.field]"
+            @change="
+              value => {
+                handleChange({
+                  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.field]"
+            :label="item.title"
+            hide-label
+            @change="
+              value => {
+                handleChange({
+                  name: item.field || item.prop,
+                  value: value.list,
+                  data: scope.row
+                });
+              }
+            "
+          />
+          <!-- <el-form-item
             :name="name"
             :prop="item.field"
             :rules="item.rules"
@@ -576,11 +584,15 @@
       >
         <!-- {{ item.render(scope.row) }} -->
       </expand-dom>
-      <template v-else>{{
-        item.formatDate
-          ? formatDate(scope.row[item.field || item.prop], item.formatDate)
-          : getValue(scope.row)
-      }}</template>
+      <template v-else
+        ><div
+          v-html="
+            item.formatDate
+              ? formatDate(scope.row[item.field || item.prop], item.formatDate)
+              : getValue(scope.row)
+          "
+        ></div
+      ></template>
     </template>
   </el-table-column>
 </template>
@@ -588,7 +600,9 @@
 <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 },
@@ -616,10 +630,22 @@ export default {
   },
   data() {
     return {
-      show: true
+      show: true,
+      isSelect: false,
+      selectStr: '',
+      optionList: {}
     };
   },
-
+  mounted() {
+    const { field, prop, name, labelKey, valueKey, sysAppCode } = this.item;
+    this.selectStr.indexOf(sysAppCode) != -1 && (this.isSelect = false);
+    if (sysAppCode && !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));
@@ -629,9 +655,26 @@ export default {
     }
   },
   methods: {
-    handleFailed(val){
-      console.log(this.$refs.emInput,'Failed')
-      console.log(this.$refs,'Failed')
+    getSelectValue(item) {
+      let params = {
+        url: item.url || findSysCode,
+        type: item.method || 'get',
+        params: {
+          ccCode: item.sysAppCode,
+          pageIndex: 1,
+          ...item.param
+        }
+      };
+      request(params).then(res => {
+        const { data, status } = res;
+        if (status === 'success') {
+          this.optionList[item.name || item.field || item.prop] = data;
+          this.show = false;
+          setTimeout(() => {
+            this.show = true;
+          }, 0);
+        }
+      });
     },
     getValue(row) {
       let str;
@@ -661,6 +704,36 @@ export default {
             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') {
@@ -672,8 +745,8 @@ export default {
         ) {
           str = '';
         } else {
-          str = row[field || prop];
-          // str = row[field || prop] ? '是' : '否';
+          // str = row[field || prop];
+          str = row[field || prop] ? '是' : '否';
         }
       }
       return str;