全局注册部分组件与save-form修改

src/components/install.js

@@ -0,0 +1,14 @@
+/**
+ *
+ * 全局注册部分组件，请自行引入
+ */
+
+import saveform from '@/components/save-form'
+import overflowtext from '@/components/overflow-text'
+
+export default {
+  install(Vue) {
+    Vue.component(saveform.name, saveform)
+    Vue.component(overflowtext.name, overflowtext)
+  }
+}

src/components/overflow-text/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-tooltip
+    class="tooltip"
+    effect="dark"
+    placement="top"
+  >
+    <template #content>
+      <span class="tooltip-content">{{text}}</span>
+    </template>
+    <div class="overflow-text" :style="{width}">
+      {{text}}
+      </div>
+  </el-tooltip>
+</template>
+<script>
+export default {
+  name: 'overflow-text',
+  props: {
+    text: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '200px'
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.tooltip-content{
+  display: inline-block;
+  max-width: 300px;
+}
+  .overflow-text{
+    overflow : hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+</style>

src/components/save-form/index.vue

@@ -12,14 +12,14 @@
 import { Searchs } from '@/helpers'
 export default {
   name: 'save-form',
-  props: ['model'],
+  props: ['model', 'save-key'],
   data() {
     return {
       searchs: null
     }
   },
   mounted() {
-    const searchs = new Searchs(this.$route.fullPath)
+    const searchs = new Searchs(this['save-key'] || this.$route.fullPath)
     this.searchs = searchs
     const active = searchs.get()
     for (const key in active.form) {
@@ -51,7 +51,22 @@ export default {
 </script>
 <style lang="less" scoped>
 .save-form{
-
+  /deep/ .el-input__inner{
+    width: 180px;
+  }
+  /deep/ .el-form-item__content .el-col {
+    width: 180px;
+  }
+  /deep/ .el-col.line{
+    width: 15px!important;
+    text-align: center;
+  }
+  /deep/ .el-date-editor--daterange{
+    width: 375px;
+  }
+  /deep/ .el-form-item__content .el-col:last-child .el-form-item{
+    margin-right: 0;
+  }
 }
 
 </style>

src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import ElementUI from 'element-ui'
+import installComponents from '@/components/install'
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import 'default-passive-events'
 import 'babel-polyfill'
@@ -61,6 +62,7 @@ ElementUI.Select.watch.value = function (newValue, oldValue) {
   }
 }
 Vue.use(ElementUI)
+Vue.use(installComponents)
 // 命名根据需要，DonMessage只是在文章中使用
 export const $message = new DonMessage()
 Vue.prototype.$message = $message

src/views/save-form-test/README.md

@@ -0,0 +1,16 @@
+#### 完整的列表增删改查示例
+
+###### 基本规范
+命名，尽量使用`-`分割线文件名
+可以分开的功能单独放在一个完整的文件夹中
+
+``` js
+demo/ // 模块目录
+demo/index.vue // 模块入口文件
+demo/api.js // 模块所有接口请求放在这里
+demo/modals // 模块需要的弹窗放在这里
+```
+
+###### 列表注意点
+1. 列表最多不超过两行，多余的鼠标移入显示
+1. 操作按钮尽量右边fliex显示

src/views/save-form-test/index.vue

@@ -4,16 +4,14 @@
       <div class="squrt"></div>保存表单演示
     </h2>
     <div class="m-core">
-      <saveform ref="form" :model.sync="form" inline>
+      <save-form ref="form" :model.sync="form" inline>
         <el-form-item
           prop="input"
-          :rules="[{required: true}]"
         >
           <el-input v-model="form.input" placeholder="请输入内容"/>
         </el-form-item>
         <el-form-item
           prop="input2"
-          :rules="[{required: true}]"
         >
           <el-input v-model="form.input2" placeholder="请输入内容2"/>
         </el-form-item>
@@ -23,6 +21,16 @@
             <el-option label="区域二" value="beijing"></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item prop="branch">
+          <el-select v-model="form.branch" placeholder="请选择分部">
+            <el-option v-for="item in selects.branchs" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="subject">
+          <el-select v-model="form.subject" placeholder="请选择声部">
+            <el-option v-for="item in selects.subjects" :key="item.id" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item required>
           <el-col :span="11">
             <el-form-item prop="date1">
@@ -36,26 +44,6 @@
             </el-form-item>
           </el-col>
         </el-form-item>
-        <!-- <el-form-item prop="delivery">
-          <el-switch v-model="form.delivery"></el-switch>
-        </el-form-item> -->
-        <!-- <el-form-item prop="type">
-          <el-checkbox-group v-model="form.type">
-            <el-checkbox label="美食/餐厅线上活动" value="1" name="type"></el-checkbox>
-            <el-checkbox label="地推活动" value="2" name="type"></el-checkbox>
-            <el-checkbox label="线下主题活动" value="3" name="type"></el-checkbox>
-            <el-checkbox label="单纯品牌曝光" value="4" name="type"></el-checkbox>
-          </el-checkbox-group>
-        </el-form-item> -->
-        <!-- <el-form-item prop="resource">
-          <el-radio-group v-model="form.resource">
-            <el-radio label="线上品牌商赞助"></el-radio>
-            <el-radio label="线下场地免费"></el-radio>
-          </el-radio-group>
-        </el-form-item> -->
-        <el-form-item prop="desc">
-          <el-input type="textarea" v-model="form.desc"></el-input>
-        </el-form-item>
         <el-form-item prop="times">
           <el-date-picker
             v-model="form.times"
@@ -65,11 +53,32 @@
             end-placeholder="结束日期">
           </el-date-picker>
         </el-form-item>
-        <el-button @click="submit">提交</el-button>
-        <el-button @click="reset">重置</el-button>
-        <el-button @click="testvisible = true">打开弹窗</el-button>
-      </saveform>
+        <div>
+          <el-button type="primary" @click="submit">提交</el-button>
+          <el-button type="danger" @click="reset">重置</el-button>
+        </div>
+      </save-form>
     </div>
+    <el-table
+      :data="list"
+      class="table"
+    >
+      <el-table-column
+        prop="title"
+        label="标题"
+      ></el-table-column>
+      <el-table-column
+        prop="remark"
+        width="220px"
+        label="备注"
+      >
+        <template slot-scope="scope">
+          <overflow-text
+            :text="scope.row.remark"
+          />
+        </template>
+      </el-table-column>
+    </el-table>
     <pagination
       :total="rules.total"
       :page.sync="rules.page"
@@ -87,12 +96,10 @@
   </div>
 </template>
 <script>
-import saveform from '@/components/save-form'
 import pagination from "@/components/Pagination/index";
 import test from './modals/test'
 export default {
   components: {
-    saveform,
     test,
     pagination
   },
@@ -117,11 +124,26 @@ export default {
         resource: '',
         desc: '',
         times: []
-      }
+      },
+      list: [{
+        id: 1,
+        title: '表阿嚏内容',
+        remark: '很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长'
+      },{
+        id: 2,
+        title: '标题信息',
+        remark: '很长很长很长'
+      }],
+    }
+  },
+  computed: {
+    selects() {
+      return this.$store.state.selects
     }
   },
   mounted() {
-
+    this.$store.dispatch('setBranchs')
+    this.$store.dispatch('setSubject')
   },
   methods: {
     getList() {
@@ -138,3 +160,12 @@ export default {
   }
 }
 </script>
+<style lang="less" scoped>
+  .table{
+    margin-top: 20px;
+    /deep/ .el-table__header .has-gutter tr th{
+      background-color: #EDEEF0;
+      color: #444;
+    }
+  }
+</style>