优化commontable组件

BoBoooooo · Jan 3, 2019 · da81673 · da81673
1 parent c5895e3
commit da81673
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 68 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
-  ]
+    '@vue/app',
+  ],
 }
diff --git a/src/components/CommonTable/index.vue b/src/components/CommonTable/index.vue
@@ -20,6 +20,7 @@
         :min-width="item.min_width"
         :header-align="item.header_align"
         :show-overflow-tooltip="item.show_overflow_tooltip"
+
       />
       <el-table-column
         label="操作"
@@ -29,28 +30,15 @@
       >
         <template slot-scope="scope">
           <el-button
-           v-if="!readOnly"
-            type="primary"
-            icon="el-icon-edit"
-            circle
-            @click="Edit(scope.row.id)"
-          />
-          <el-button
-                     v-if="!readOnly"
+              v-for="(btn,index) in getShowButton"
+              :class="btn.classname ? btn.classname : ''"
+              :key="index"
+              :type="btn.type"
+              :size="btn.size"
+              :icon="btn.icon"
+              @click.stop="handleOperation(btn.Fun,scope.row.id)">{{ btn.label }}</el-button>
 
-            type="danger"
-            icon="el-icon-delete"
-            circle
-            @click="Delete(scope.row.id)"
-          />
-           <el-button
-                      v-if="readOnly"
 
-            type="success"
-            icon="el-icon-view"
-            circle
-            @click="Detail(scope.row.id)"
-          />
         </template>
       </el-table-column>
     </el-table>
@@ -85,15 +73,56 @@ export default {
       type: Boolean,
       default: true,
     },
-    listQuery: {
+    listQuery: { // 列表查询以及分页参数
       type: Object,
       default: () => ({}),
     },
-    readOnly: {
-      type: Boolean,
+    handleButton: { //
+      type: String,
+      default: 'edit,delete,detail',
     },
 
   },
+  data() {
+    return {
+      operation: // 操作列按钮
+         [
+           {
+             size: 'mini',
+             classname: 'show',
+             name: 'edit',
+             label: '修改',
+             Fun: 'handleEdit',
+             type: 'primary',
+           },
+           {
+             size: 'mini',
+             classname: 'show',
+             name: 'detail',
+             label: '详情',
+             Fun: 'handleDetail',
+             type: 'success',
+
+           },
+           {
+             size: 'mini',
+             classname: 'show',
+             name: 'delete',
+             label: '删除',
+             Fun: 'handleDelete',
+             type: 'danger',
+
+           },
+         ],
+
+
+    }
+  },
+  computed: {
+    getShowButton() {
+      return this.operation.filter(element => this.handleButton.includes(element.name));
+    },
+  },
   methods: {
 
     handleSizeChange(val) {
@@ -105,14 +134,19 @@ export default {
       this.$emit('handleCurrentChange', this.listQuery)
     },
 
-    Edit(id) {
-      this.$emit('Edit', id)
-    },
-    Detail(id) {
-      this.$emit('Detail', id)
-    },
-    Delete(id) {
-      this.$emit('Delete', id)
+    // Edit(id) {
+    //   this.$emit('Edit', id)
+    // },
+    // Detail(id) {
+    //   this.$emit('Detail', id)
+    // },
+    // Delete(id) {
+    //   this.$emit('Delete', id)
+    // },
+    handleOperation(eventName, id) {
+      console.log(eventName);
+      console.log(id);
+      this.$emit(eventName, id)
     },
   },
 }

diff --git a/src/components/CommonToolBar/index.vue b/src/components/CommonToolBar/index.vue
@@ -5,13 +5,13 @@
       v-show="buttonVisible=='el-icon-arrow-up'"
       class="searchContainer"
     >
-      <ElRow
+      <el-row
         v-for="(item,index) in searchArr"
         :key="index"
         style="margin-top:2px"
       >
-        <ElCol :span="6">
-          <ElSelect
+        <el-col :span="6">
+          <el-select
             v-model="item.SearchKey"
             style="width:100%"
             placeholder="请选择查询项"
@@ -22,10 +22,10 @@
               :label="subitem.label"
               :value="subitem.prop"
             />
-          </ElSelect>
-        </ElCol>
-        <ElCol :span="6">
-          <ElSelect
+          </el-select>
+        </el-col>
+        <el-col :span="6">
+          <el-select
             v-model="item.SearchType"
             style="width:100%"
             placeholder="请选择查询条件"
@@ -36,22 +36,22 @@
               :label="subitem__.label"
               :value="subitem__.key"
             />
-          </ElSelect>
-        </ElCol>
+          </el-select>
+        </el-col>
 
-        <ElCol :span="10">
+        <el-col :span="10">
           <ElInput
             v-model="item.SearchValue"
             style="width:100%"
             placeholder="请输入查询内容"
           />
-        </ElCol>
+        </el-col>
 
-        <ElCol
+        <el-col
           :span="2"
           style="text-align:center"
         >
- <ElButton
+ <el-button
             style="margin:5px 0px 0px 10px;padding:10px"
             type="danger"
             size="mini"
@@ -60,11 +60,11 @@
             @click="removeItem"
           />
 
-        </ElCol>
-      </ElRow>
+        </el-col>
+      </el-row>
                 <el-tooltip class="item" effect="dark" content="添加查询项" placement="right">
 
-      <ElButton
+      <el-button
         style="margin:0 auto;display:block;margin-top:10px"
         type="primary"
         size="mini"
@@ -76,9 +76,9 @@
 
     </div>
 
-    <ElRow style="margin-bottom:10px">
-      <ElCol :span="24">
-        <ElButtonGroup style="float:right">
+    <el-row style="margin-bottom:10px">
+      <el-col :span="24">
+        <el-button-group style="float:right">
            <el-tooltip class="item" effect="light" content="新增" placement="top">
       <el-button  icon="el-icon-plus"
             @click="New()" ></el-button>
@@ -101,9 +101,9 @@
     </el-tooltip>
 
 
-        </ElButtonGroup>
-      </ElCol>
-    </ElRow>
+        </el-button-group>
+      </el-col>
+    </el-row>
   </div>
 </template>
 

diff --git a/src/components/FormDesigner/ListConfig.vue b/src/components/FormDesigner/ListConfig.vue
@@ -15,7 +15,7 @@
     <table class="listconfig_table">
 
       <thead>
-        <th>字段</th><th>标题</th><th>列宽</th><th>最小宽度</th><th>排序</th><th>内容对齐</th><th>表头对齐</th><th>超出隐藏</th><th>作为查询条件</th><th/>
+        <th>字段</th><th>标题</th><th>列宽</th><th>最小宽度</th><th>排序</th><th>内容对齐</th><th>表头对齐</th><th>超出隐藏</th><th>作为查询条件</th><th>自定义列</th><th/>
       </thead>
       <draggable
         v-model="config.columnList"
@@ -131,6 +131,12 @@
             </el-select>
 
           </td>
+          <td>
+            <el-input type="textarea"
+              v-model="item.formatter"
+              placeholder="自定义列"></el-input>
+          </td>
+
           <td> <el-button
             type="danger"
             size="mini"
@@ -144,6 +150,8 @@
 
     </table>
 
+
+    <!-- <el-button @click="addOperationColumn()">添加操作列</el-button> -->
     <el-button
       style="margin:0 auto;display:block;margin-top:10px"
       size="mini"
@@ -169,7 +177,7 @@ export default {
     return {
       selectList: [],
       finalList: [],
-      configObj: {
+      configObj: { // 普通列初始对象
         label: '',
         prop: '',
         align: 'center',
@@ -178,8 +186,36 @@ export default {
         min_width: '100px',
         header_align: 'center',
         show_overflow_tooltip: false,
-        slot: '',
         searchable: true,
+        formatter: '',
+      },
+      operation: { // 操作列对象功能
+        label: '操作', // 操作列的行首文字
+        width: '200', // 操作列的宽度
+        className: '', // 操作列的class名
+        data: [ // 操作列数据
+          {
+            name: 'edit',
+            label: '修改', // 按钮文字
+            Fun: 'handleEdit', // 点击按钮后触发的父组件事件
+            size: 'mini', // 按钮大小
+            classname: 'show', // 按钮的类名
+          },
+          {
+            name: 'detail',
+            label: '详情', // 按钮文字
+            Fun: 'handleEdit', // 点击按钮后触发的父组件事件
+            size: 'mini', // 按钮大小
+            classname: 'show', // 按钮的类名
+          },
+          {
+            name: 'delete',
+            label: '删除', // 按钮文字
+            Fun: 'handleDelete', // 点击按钮后触发的父组件事件
+            size: 'mini', // 按钮大小
+            classname: 'show', // 按钮的类名
+          },
+        ],
       },
       true: true,
       false: false,
@@ -188,7 +224,7 @@ export default {
   watch: {
     tablename: {
       immediate: true,
-      handler(val) {
+      handler() {
         getKeyBytableName(this.tablename).then((response) => {
           this.selectList = response.data;
           this.selectList.forEach((item) => {
@@ -199,6 +235,10 @@ export default {
     },
   },
   methods: {
+
+    // addOperationColumn() {
+    //   this.config.columnList.push({ ...this.operation })
+    // },
     removeItem(item) {
       const index = this.config.columnList.indexOf(item);
       if (index != null) {

diff --git a/src/views/Archive/person_detail.vue b/src/views/Archive/person_detail.vue
@@ -16,9 +16,9 @@
       :table-json="jsonData.config.columnList"
       :list-query="listQuery"
       :list-loading="listLoading"
-      @Detail="Detail"
+      @handleDetail="Detail"
       @handleCurrentChange="Refresh"
-      readOnly
+      handleButton="detail"
     />
 
 

diff --git a/src/views/Archive/person_edit.vue b/src/views/Archive/person_edit.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     id="person"
-    class="app-container widget-box">
+    class="widget-box">
 
     <common-tool-bar
       :option-json ="jsonData.config.columnList"
@@ -11,16 +11,15 @@
       @clearEvent ="Clear"
     />
 
-
     <common-table
       :list="list"
       :table-json="jsonData.config.columnList"
       :list-query="listQuery"
       :list-loading="listLoading"
-      @Edit="Edit"
-      @Delete="Delete"
+      @handleEdit="Edit"
+      @handleDelete="Delete"
       @handleCurrentChange="Refresh"
-
+      handleButton="edit,delete"
     />
 
 
@@ -235,5 +234,5 @@ export default {
       console.log(selection);
     },
   },
-};
+}
 </script>
diff --git a/vue.config.js b/vue.config.js
@@ -3,7 +3,7 @@
  * @Author: BoBo
  * @Date: 2018-12-23 10:59:19
  * @Last Modified by: BoBo
- * @Last Modified time: 2018-12-24 18:03:16
+ * @Last Modified time: 2019-01-03 17:48:05
  */
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const path = require('path');