update

components/README.md

@@ -15,6 +15,12 @@
       * isNew: Boolean default=>true 用来看是不是修改,不过现在还没做修改部分,还没用呢
       * data: null,什么类型都行,原数据
     }
+    slot: {
+      type为
+      > select => 选项统一写在options插槽中,多个select的情况需要区分是谁的options
+      > custom => 自定义插槽,完全自己去写
+
+    }
 
   * 关于自定义的用法:
     * 在fields中,custom:true的情况即需要自定义,写法如下

components/form.vue

@@ -3,23 +3,22 @@
     <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="form" size="small" @submit.native.prevent>
       <el-form-item v-for="(item, index) in fields" :key="'form-field-' + index" :label="getField('label', item)" :prop="item.model" :required="item.required">
         <template v-if="!item.custom">
-          <!-- <template v-if="item.type === `date` || item.type === `datetime`">
-            <date-select :value="form[item.model]" :type="item.type" :model="item.model" @handle="fieldChange" :placeholder="item.label"></date-select>
-            <el-input :readonly="true" v-model="form[item.model]" @click.native="dateShow = true" :placeholder="`请选择时间`"></el-input>
-            <van-action-sheet v-model="dateShow">
-              <van-datetime-picker
-                v-model="form[item.model]"
-                type="date"
-                :min-date="new Date(`1920/01/01`)"
-                :max-date="new Date()"
-                @cancel="show = false"
-                @confirm="data => onDateSelect(data, item.model)"
-              />
-            </van-action-sheet>
-          </template> -->
-          <template v-if="item.type === 'select'">
+          <template v-if="item.type === `date` || item.type === `datetime`">
+            <el-date-picker v-model="form[item.model]" :type="item.type" placeholder="选择择" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
+          </template>
+          <template v-else-if="item.type === 'radio'">
+            <el-radio-group v-model="form[item.model]" size="mini">
+              <slot name="radios" v-bind="{ item, form, fieldChange }"></slot>
+            </el-radio-group>
+          </template>
+          <template v-else-if="item.type === 'checkbox'">
+            <el-checkbox-group v-model="form[item.model]">
+              <slot name="checkboxs" v-bind="{ item, form, fieldChange }"></slot>
+            </el-checkbox-group>
+          </template>
+          <template v-else-if="item.type === 'select'">
             <el-select v-model="form[item.model]">
-              <slot name="options"></slot>
+              <slot name="options" v-bind="{ item, form, fieldChange }"></slot>
             </el-select>
           </template>
           <template v-else>
@@ -65,6 +64,12 @@ export default {
   computed: {},
   mounted() {},
   watch: {
+    fields: {
+      handle(val) {
+        this.checkType();
+      },
+      immediate: true,
+    },
     data: {
       handler(val) {
         if (val) this.$set(this, `form`, this.data);
@@ -93,20 +98,8 @@ export default {
     fieldChange({ model, value }) {
       this.$set(this.form, model, value);
     },
-    onSelect(item, model) {
-      this.$set(this, `display`, item.name);
-      this.$set(this.form, model, item.value);
-      this.show = false;
-    },
-    onDateSelect(item, model) {
-      let date = new Date(item);
-      this.$set(this.form, model, date.toLocaleDateString());
-      // this.$emit('handle', { model: this.model, value: date.toLocaleDateString() });
-      this.dateShow = false;
-    },
-    getDisplay(val) {
-      this.$set(this, `display`, val);
-      this.$set(this, `select`, new Date(val));
+    checkType() {
+      console.log(this.fields);
     },
   },
 };
@@ -115,6 +108,7 @@ export default {
 <style lang="less" scoped>
 .form {
   padding: 2rem;
-  background: #fff;border-radius: 20px;
+  background: #fff;
+  border-radius: 20px;
 }
 </style>

layout/admin/README.md

@@ -10,4 +10,5 @@
       * totalRow: Number 数据总数
       * needPag: 是否需要分页
       * returns: 有,则会出现后退标题
+      * needFilter: 是否需要查询
     }

layout/admin/list-frame.vue

@@ -1,59 +1,61 @@
 <template>
-  <div id="list-frame">
-    <el-card style="background:rgb(231, 224, 235);border-radius: 60px;" shadow="hover">
-      <el-row>
-        <el-col :span="24" class="title">
-          <span v-if="returns">
-            <el-button
-              size="mini"
-              plan
-              circle
-              @click="$router.push({ path: returns })"
-              style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
-            >
-              <span class="el-icon-arrow-left" style="zoom:1.5;font-weight:700"></span>
-            </el-button>
-          </span>
-          <slot name="title">
-            {{ title }}
-          </slot>
-        </el-col>
-      </el-row>
-      <slot name="filter">
-        <el-form :inline="true">
-          <el-form-item v-for="(item, index) in filter" :key="index" :label="item.label" label-width="auto">
-            <template v-if="item.type === `select`">
-              <el-select v-model="searchInfo[`${item.model}`]" size="mini">
-                <el-option v-for="(select, sIndex) in item.list" :key="sIndex" :label="select.label" :value="select.value"></el-option>
-              </el-select>
-            </template>
-            <template v-else>
-              <el-input v-model="searchInfo[`${item.model}`]" size="mini"></el-input>
-            </template>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" size="mini">查询</el-button>
-          </el-form-item>
-        </el-form>
-      </slot>
+  <div id="list-frame" :style="`height:${heights}px`">
+    <el-scrollbar style="height:100%">
+      <el-card style="background:rgb(231, 224, 235);border-radius: 60px;" shadow="hover">
+        <el-row>
+          <el-col :span="24" class="title">
+            <span v-if="returns">
+              <el-button
+                size="mini"
+                plan
+                circle
+                @click="$router.push({ path: returns })"
+                style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)"
+              >
+                <span class="el-icon-arrow-left" style="zoom:1.5;font-weight:700"></span>
+              </el-button>
+            </span>
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </el-col>
+        </el-row>
+        <slot name="filter" v-if="needFilter">
+          <el-form :inline="true">
+            <el-form-item v-for="(item, index) in filter" :key="index" :label="item.label" label-width="auto">
+              <template v-if="item.type === `select`">
+                <el-select v-model="searchInfo[`${item.model}`]" size="mini">
+                  <el-option v-for="(select, sIndex) in item.list" :key="sIndex" :label="select.label" :value="select.value"></el-option>
+                </el-select>
+              </template>
+              <template v-else>
+                <el-input v-model="searchInfo[`${item.model}`]" size="mini"></el-input>
+              </template>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="mini">查询</el-button>
+            </el-form-item>
+          </el-form>
+        </slot>
 
-      <div style="padding:1.875rem;">
-        <slot> </slot>
-      </div>
-      <el-row type="flex" align="middle" justify="end" v-if="needPag">
-        <el-col :span="24" style="text-align:right;">
-          <el-pagination
-            background
-            layout="total, prev, pager, next"
-            :total="totalRow"
-            :page-size="limit"
-            :current-page.sync="currentPage"
-            @current-change="changePage"
-          >
-          </el-pagination>
-        </el-col>
-      </el-row>
-    </el-card>
+        <div style="padding:1.875rem;">
+          <slot> </slot>
+        </div>
+        <el-row type="flex" align="middle" justify="end" v-if="needPag">
+          <el-col :span="24" style="text-align:right;">
+            <el-pagination
+              background
+              layout="total, prev, pager, next"
+              :total="totalRow"
+              :page-size="limit"
+              :current-page.sync="currentPage"
+              @current-change="changePage"
+            >
+            </el-pagination>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-scrollbar>
   </div>
 </template>
 
@@ -67,15 +69,26 @@ export default {
     totalRow: { type: Number, default: 0 },
     needPag: { type: Boolean, default: true },
     returns: { type: null, default: null },
+    needFilter: { type: Boolean, default: true },
   },
   components: {},
   data: () => ({
     limit: _.get(this, `$limit`, undefined) !== undefined ? this.$limit : 15,
     currentPage: 1,
     searchInfo: {},
+    heights: document.documentElement.clientHeight - 80,
   }),
   created() {},
   computed: {},
+  mounted() {
+    const that = this;
+    window.onresize = () => {
+      return (() => {
+        window.fullHeight = document.documentElement.clientHeight - 80;
+        that.heights = window.fullHeight;
+      })();
+    };
+  },
   methods: {
     changePage(page) {
       this.$emit('query', { skip: (page - 1) * this.limit, limit: this.limit, ...this.searchInfo });
@@ -90,4 +103,7 @@ export default {
   font-weight: 700;
   padding: 1rem;
 }
+/deep/.el-scrollbar__wrap {
+  overflow-x: auto;
+}
 </style>