eoss-mobiles 0.4.0 → 0.4.2

package/packages/form/src/CustomCard.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="em-custom-card">
+    <div v-if="cardList.length === 0" class="empty-tip">暂无数据</div>
+
+    <div v-for="(card, index) in cardList" :key="index" class="card-item">
+      <van-cell-group class="card-content">
+        <div
+          v-for="(field, fieldIndex) in tHead"
+          :key="fieldIndex"
+          class="card-field"
+        >
+          <div class="field-label">{{ field.title }}</div>
+          <div class="field-value">
+            <em-input
+              v-if="field.type === 'text'"
+              v-model="card[field.key]"
+              :placeholder="field.placeholder"
+              :disabled="disabled || readonly"
+              label-width="0"
+            />
+
+            <em-input
+              v-else-if="field.type === 'number' || field.type === 'digit'"
+              v-model="card[field.key]"
+              type="number"
+              :placeholder="field.placeholder"
+              :disabled="disabled || readonly"
+              label-width="0" 
+            />
+
+            <em-input
+              v-else-if="field.type === 'textarea'"
+              v-model="card[field.key]"
+              type="textarea"
+              :autosize="field.autosize || { minRows: 2 }"
+              :placeholder="field.placeholder"
+              :disabled="disabled || readonly"
+              label-width="0"
+            />
+
+            <em-radio-group
+              v-else-if="field.type === 'radio'"
+              v-model="card[field.key]"
+              :data="getOptions(field.field)"
+              :disabled="disabled || readonly"
+            >
+            </em-radio-group>
+
+            <em-checkbox-group
+              v-else-if="field.type === 'checkbox'"
+              v-model="card[field.key]"
+              :disabled="disabled || readonly"
+              :data="getOptions(field.field)"
+            >
+            </em-checkbox-group>
+
+            <em-picker
+              v-else-if="field.type === 'select'"
+              v-model="card[field.key]"
+              :columns="getOptions(field.field)"
+              :placeholder="field.placeholder"
+              :disabled="disabled || readonly"
+              label-width="0"
+            />
+
+            <span v-else>{{ card[field.key] }}</span>
+          </div>
+        </div>
+      </van-cell-group>
+
+      <div v-if="editable && !disabled && !readonly" class="card-actions">
+        <em-button
+          size="small"
+          type="danger"
+          plain
+          @click="handleDelete(index)"
+        >
+          删除
+        </em-button>
+      </div>
+    </div>
+
+    <div v-if="editable && !disabled && !readonly" class="add-btn-wrapper">
+      <em-button block type="primary" plain icon="plus" @click="handleAdd">
+        添加
+      </em-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CustomCard',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    tHead: {
+      type: Array,
+      default: () => []
+    },
+    optionData: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    maxCount: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      cardList: [],
+      isInternalUpdate: false
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.isInternalUpdate = true;
+        if (val && Array.isArray(val)) {
+          this.cardList = JSON.parse(JSON.stringify(val));
+        } else {
+          this.cardList = [];
+        }
+        this.$nextTick(() => {
+          this.isInternalUpdate = false;
+        });
+      },
+      immediate: true,
+      deep: true
+    },
+    cardList: {
+      handler(val) {
+        if (!this.isInternalUpdate) {
+          this.$emit('input', val);
+          this.$emit('change', val);
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    getOptions(fieldName) {
+      return (
+        this.optionData[fieldName].map((ele) => {
+          return { name: ele, value: ele };
+        }) || []
+      );
+    },
+
+    handleAdd() {
+      if (this.maxCount > 0 && this.cardList.length >= this.maxCount) {
+        this.$toast(`最多只能添加${this.maxCount}条`);
+        return;
+      }
+      const newCard = {};
+      this.tHead.forEach((field) => {
+        newCard[field.key] =
+          field.defaultValue !== undefined && field.defaultValue != ''
+            ? field.defaultValue
+            : field.type === 'checkbox'
+            ? []
+            : '';
+      });
+      console.log('newCard', newCard);
+      this.cardList.push(newCard);
+      this.$emit('add', newCard, this.cardList.length - 1);
+    },
+    handleDelete(index) {
+      this.$dialog
+        .confirm({
+          title: '提示',
+          message: '确定要删除这条数据吗？'
+        })
+        .then(() => {
+          this.cardList.splice(index, 1);
+          this.$emit('delete', index);
+        })
+        .catch(() => {});
+    },
+    updateParentData() {
+      this.$emit('input', this.cardList);
+      this.$emit('change', this.cardList);
+    }
+  }
+};
+</script>

package/packages/form/src/main.vue

@@ -372,25 +372,36 @@
             }
           "
         />
-        <em-table
-          v-else-if="item.type == 'table'"
-          class="em-form-table"
-          ref="emFormTable"
-          v-bind="{ ...$attrs, ...item }"
-          :data="model[item.name]"
-          :thead="item.tHead"
-          :style="`margin:${item.margin || 10}px 0px`"
-          isForm
-          :form="
-            !item.disabled &&
-            !disabled &&
-            !item.readonly &&
-            !readonly &&
-            item.form
-          "
-          v-on="{ ...item.events }"
-          @btn-click="handleBtnClick"
-        />
+        <template v-else-if="item.type == 'table'">
+          <custom-card
+            v-if="item.presentType && item.presentType == 'card'"
+            v-model="model[item.name]"
+            v-bind="{ ...$attrs, ...item }"
+          ></custom-card>
+          <em-table
+            v-else
+            class="em-form-table"
+            ref="emFormTable"
+            v-bind="{
+              ...$attrs,
+              ...item
+            }"
+            :data="model[item.name]"
+            :thead="item.tHead"
+            :style="`margin:${item.margin || 10}px 0px`"
+            isForm
+            :form="
+              !item.disabled &&
+              !disabled &&
+              !item.readonly &&
+              !readonly &&
+              item.form
+            "
+            v-on="{ ...item.events }"
+            @btn-click="handleBtnClick"
+          />
+        </template>
+
         <van-cell
           v-else-if="item.type === 'component'"
           :title="item.label"
@@ -436,6 +447,7 @@
 </template>
 
 <script>
+import CustomCard from './CustomCard.vue';
 export default {
   name: 'EmForm',
   props: {
@@ -470,6 +482,7 @@ export default {
       default: 'left'
     }
   },
+  components: { CustomCard },
   computed: {
     btnList() {
       return this.contents.filter((x) => x.type === 'submit');

package/packages/grid/index.js

@@ -1,5 +1,5 @@
-import EmGrid from './src/main';
-
-EmGrid.install = Vue => Vue.component(EmGrid.name, EmGrid);
-
-export default EmGrid;
+import EmGrid from './src/main';
+
+EmGrid.install = Vue => Vue.component(EmGrid.name, EmGrid);
+
+export default EmGrid;