Merge branch 'master' of http://git.echepei.com/wengyuwen/anpinjingyuan-ui

src/combination/listComponent.vue

@@ -0,0 +1,259 @@
+<template>
+  <div>
+    <div style="width: 100%;height: 40px;">
+      <div style="margin: 0 12px;float: left;">
+        <el-button
+          v-for="item in customButton"
+          :type="item.type"
+          :size="item.size"
+          :icon="item.icon"
+          :disabled="item.disabled"
+          @click="buttonList(item)">
+          {{ item.name }}
+        </el-button>
+      </div>
+      <div class="tabSetting">
+        <div style="margin-left:10px;float: right">
+          <el-button
+            icon="el-icon-setting"
+            size="mini"
+            circle
+            @click="showSetting = !showSetting"
+          ></el-button>
+        </div>
+        <right-toolbar
+          @showSearch="showSearch"
+          @queryTable="getList"
+        ></right-toolbar>
+      </div>
+    </div>
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+      @selection-change="handleSelectionChange"
+      :row-class-name="rowClassName"
+    >
+      <el-table-column
+        v-for="(item,index) in setRowList"
+        :key="index"
+        :prop="item.label"
+        :label="item.name"
+        :width="item.width"
+        align="center"
+      >
+        <template slot-scope="scope">
+          <span v-if="item.name === '操作'">
+            <span v-if="item.operation == 1">
+              <el-button type="text" @click="viewMethod(scope)">查看</el-button>
+              <el-button type="text" @click="modification(scope)">修改</el-button>
+              <el-button type="text" @click="deletion(scope)">删除</el-button>
+            </span>
+            <span v-if="item.operation == 2">
+              <el-button type="text" @click="deleteRow(scope.$index, tableData)">移除</el-button>
+            </span>
+          </span>
+          <span v-else-if="item.changeable">
+            <el-select v-if="item.changeable == 1" v-model="scope.row[item.label]" slot="prepend" placeholder="请选择">
+              <el-option
+                v-for="(item,index) in item.data"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              ></el-option>
+            </el-select>
+            <el-input v-if="item.changeable == 2" v-model="scope.row[item.label]" placeholder="请输入内容" :onkeyup="item.onabort"></el-input>
+            <el-date-picker
+              v-if="item.changeable == 3"
+              v-model="scope.row[item.label]"
+              type="date"
+              placeholder="选择日期"
+            >
+            </el-date-picker>
+          </span>
+          <span v-else>{{ scope.row[item.label] }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog title="自定义列显示" :visible.sync="showSetting" width="700px">
+      <div>配置排序列数据（拖动调整顺序）</div>
+      <div style="margin-left: 17px">
+        <el-checkbox
+          v-model="allCheck"
+          label="全选"
+          @change="allChecked"
+        ></el-checkbox>
+      </div>
+      <div style="padding: 4px; display: flex; justify-content: center">
+        <draggable
+          v-model="setRowList"
+          group="site"
+          animation="300"
+          @start="onStart"
+          @end="onEnd"
+          handle=".indraggable"
+        >
+          <transition-group>
+            <div
+              v-for="item in setRowList"
+              :key="item.surface"
+              class="listStyle"
+            >
+              <div style="width: 500px" class="indraggable">
+                <div class="progress" :style="{ width: item.width + 'px' }">
+                  <el-checkbox
+                    :label="item.name"
+                    v-model="item.checked"
+                    :true-label="0"
+                    :false-label="1"
+                  >{{ item.name }}
+                  </el-checkbox>
+                </div>
+              </div>
+              <el-input-number
+                v-model.number="item.width"
+                controls-position="right"
+                :min="1"
+                :max="500"
+                size="mini"
+              ></el-input-number>
+            </div>
+          </transition-group>
+        </draggable>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showSetting = false">取 消</el-button>
+        <el-button @click="delRow" type="danger">重 置</el-button>
+        <el-button type="primary" @click="save()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addSet, resetModule } from "@/api/system/set";
+import Cookies from "js-cookie";
+export default {
+  name: 'listComponent',
+  props: ['tableData', 'listStyle','queryList','customButton'],
+  data() {
+    return {
+      setRowList:this.queryList.columnList.length !== 0?this.queryList.columnList:this.listStyle,
+      showSetting: false,
+      allCheck: false,
+    }
+  },
+  created() {
+    console.log(this.listStyle)
+    console.log(this.queryList)
+    console.log(this.queryList.columnList.length)
+  },
+  methods: {
+    //行号设置
+    rowClassName({row, rowIndex}) {
+      console.log(row,rowIndex)
+      //把每一行的索引放进row.id
+      row.fLineNumber = rowIndex+1;
+      console.log(row.fLineNumber)
+    },
+    //列设置全选
+    allChecked() {
+      if (this.allCheck == true) {
+        this.setRowList.map((e) => {
+          return (e.checked = 0);
+        });
+      } else {
+        this.setRowList.map((e) => {
+          return (e.checked = 1);
+        });
+      }
+    },
+    //开始拖拽事件
+    onStart() {
+      this.drag = true;
+    },
+    //拖拽结束事件
+    onEnd() {
+      this.drag = false;
+    },
+    //保存列设置
+    save() {
+      this.showSetting = false;
+      this.data = {
+        tableName: this.queryList.tableName,
+        userId: Cookies.get("userName"),
+        sysTableSetList: this.setRowList,
+      };
+      addSet(this.data).then((res) => {
+        if (res.code == 200) {
+          this.showSetting = false;
+          this.getRowList = this.setRowList.filter((e) => e.checked == 0);
+        }
+      });
+    },
+    //自定义列
+    delRow() {
+      this.data = {
+        tableName: this.queryList.tableName,
+        userId: Cookies.get("userName"),
+      };
+      resetModule(this.data).then((res) => {
+        if (res.code == 200) {
+          this.showSetting = false;
+          this.setRowList = this.listStyle;
+          console.log(this.getRowList)
+        }
+      });
+    },
+    showSearch(){
+      this.$emit('showSearch')
+    },
+    //刷新按钮
+    getList(){
+      this.$emit('getList')
+    },
+    //所有按钮
+    buttonList(row){
+      this.$emit('buttonList', row)
+    },
+    //查看
+    viewMethod(scope) {
+      this.$emit('see', scope)
+    },
+    //修改
+    modification(scope){
+      this.$emit('modify', scope)
+    },
+    //删除
+    deletion(scope){
+      this.$emit('deletion', scope)
+    },
+    //移出
+    deleteRow(index, rows) {
+      rows.splice(index, 1);
+    },
+    //选择
+    handleSelectionChange(selection){
+      this.$emit('selectionbox', selection)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.listStyle {
+  display: flex;
+  border-top: 1px solid #dcdfe6;
+  border-left: 1px solid #dcdfe6;
+  border-right: 1px solid #dcdfe6;
+}
+.listStyle:last-child {
+  border-bottom: 1px solid #dcdfe6;
+}
+.progress {
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  background-color: rgba(0, 0, 0, 0.05);
+  height: 100%;
+}
+</style>

src/components/RightToolbar/index.vue

@@ -55,6 +55,7 @@ export default {
     // 搜索
     toggleSearch() {
       this.$emit("update:showSearch", !this.showSearch);
+      this.$emit("showSearch", !this.showSearch);
     },
     // 刷新
     refresh() {

src/main.js

@@ -20,7 +20,11 @@ import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels,
 import Pagination from "@/components/Pagination";
 // 自定义表格工具扩展
 import RightToolbar from "@/components/RightToolbar"
-
+//自定义列表组件
+import listComponent from '@/combination/listComponent'
+Vue.component('listComponent', listComponent)
+import draggable from "vuedraggable";
+Vue.component('draggable', draggable)
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
@@ -64,7 +68,6 @@ Vue.use(Element, {
 })
 
 Vue.config.productionTip = false
-
 new Vue({
   el: '#app',
   router,

src/views/template/template01.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="app-container">
+    <listComponent
+      v-if="waitFor"
+      :tableData="tableData"
+      @selectionbox="selectionbox"
+      @see="viewMethod"
+      @modify="modification"
+      @deletion="deletion"
+      @buttonList="buttonList"
+      @showSearch="showSearch"
+      @getList="getList"
+      :customButton="customButton"
+      :listStyle="listStyle"
+      :queryList="queryList"
+    />
+  </div>
+</template>
+<script>
+import Cookies from 'js-cookie'
+import { select } from '@/api/system/set'
+
+export default {
+  name: 'template01',
+  data() {
+    return {
+      customButton:[
+        {
+          type:'primary',
+          size:'small',
+          icon:'el-icon-edit',
+          name:'录入',
+          disabled:false,
+        },{
+          type:'danger',
+          size:'small',
+          icon:'el-icon-edit',
+          name:'修改',
+          disabled:true
+        }
+      ],
+      tableData:[
+        {
+          fMaterial0:'1111',
+          fMaterial1:'1',
+        },{
+          fMaterial0:'1111',
+          fMaterial1:'2',
+        },{
+          fMaterial0:'1111',
+          fMaterial1:'1',
+        }
+      ],
+      listStyle: [
+        {
+          surface: "1",
+          label: "fLineNumber",
+          name: "序号",
+          checked: 0,
+          width: 100,
+          onabort:''
+        },{
+          surface: "2",
+          label: "fMaterial1",
+          name: "其他01",
+          checked: 0,
+          width: 100,
+          changeable:2,
+          data:[
+            {
+              label:'餐厅',
+              value:'1'
+            },
+            {
+              label:'酒店',
+              value:'2'
+            }
+          ],
+          onabort:'this.value=this.value.replace(/[^_a-zA-Z]/g,\'\')'
+        },{
+          surface: "3",
+          label: "fMaterial2",
+          name: "操作",
+          checked: 0,
+          width: 200,
+          operation:1
+        }
+      ],
+      //判断自定义列是否有值再渲染组件
+      waitFor:false,
+      queryList:{
+        tableName:'模板列',
+        columnList:[]
+      },
+    }
+  },
+  created() {
+    this.getRow()
+  },
+  methods:{
+    //查询列数据
+    getRow() {
+      this.data = {
+        tableName: this.queryList.tableName,
+        userId: Cookies.get("userName"),
+      };
+      select(this.data).then((res) => {
+        console.log(res)
+        if (res.data.length != 0) {
+          this.queryList.columnList = res.data.filter((e) => e.checked == 0);
+          this.queryList.columnList = res.data;
+          this.queryList.columnList = this.queryList.columnList.reduce((res, item) => {
+            res.push({
+              surface: item.surface,
+              label: item.label,
+              name: item.name,
+              checked: item.checked,
+              width: item.width,
+              fixed: item.fixed,
+            });
+            return res;
+          }, []);
+          this.waitFor = true
+        }else {
+          this.waitFor = true
+        }
+        console.log(this.getRowList)
+      });
+    },
+    //查看
+    viewMethod(scope){
+      console.log(scope)
+    },
+    //修改
+    modification(scope){
+      console.log(scope)
+    },
+    //删除
+    deletion(scope){
+      console.log(scope)
+    },
+    //选择框
+    selectionbox(selection){
+      console.log(selection)
+    },
+    //所以按钮
+    buttonList(row){
+      console.log(row)
+    },
+    // 显示搜索条件、点击后会调用此方法
+    showSearch(){
+      console.log('到我了')
+    },
+    //点击刷新会调用此方法
+    getList(){
+      console.log('到我了2')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>