春风项目四线(合箱线、总装线)
查看 | 历史 | 提交 | 提交对比
jiang
2024-01-12 c9a5c5c9a57abee05470e958e4dc161809f73cf4
提交 | 用户 | 时间
fd2207 1 <template>
懒 2   <div class="top-right-btn" :style="style">
3     <el-row>
4       <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
5         <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
6       </el-tooltip>
7       <el-tooltip class="item" effect="dark" content="刷新" placement="top">
8         <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
9       </el-tooltip>
10       <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
11         <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
12         <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
13           <el-button size="mini" circle icon="el-icon-menu" />
14           <el-dropdown-menu slot="dropdown">
15             <template v-for="item in columns">
16               <el-dropdown-item :key="item.key">
17                 <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
18               </el-dropdown-item>
19             </template>
20           </el-dropdown-menu>
21         </el-dropdown>
22       </el-tooltip>
23     </el-row>
24     <el-dialog :title="title" :visible.sync="open" append-to-body>
25       <el-transfer
26         :titles="['显示', '隐藏']"
27         v-model="value"
28         :data="columns"
29         @change="dataChange"
30       ></el-transfer>
31     </el-dialog>
32   </div>
33 </template>
34 <script>
35 export default {
36   name: "RightToolbar",
37   data() {
38     return {
39       // 显隐数据
40       value: [],
41       // 弹出层标题
42       title: "显示/隐藏",
43       // 是否显示弹出层
44       open: false,
45     };
46   },
47   props: {
48     /* 是否显示检索条件 */
49     showSearch: {
50       type: Boolean,
51       default: true,
52     },
53     /* 显隐列信息 */
54     columns: {
55       type: Array,
56     },
57     /* 是否显示检索图标 */
58     search: {
59       type: Boolean,
60       default: true,
61     },
62     /* 显隐列类型（transfer穿梭框、checkbox复选框） */
63     showColumnsType: {
64       type: String,
65       default: "checkbox",
66     },
67     /* 右外边距 */
68     gutter: {
69       type: Number,
70       default: 10,
71     },
72   },
73   computed: {
74     style() {
75       const ret = {};
76       if (this.gutter) {
77         ret.marginRight = `${this.gutter / 2}px`;
78       }
79       return ret;
80     }
81   },
82   created() {
83     if (this.showColumnsType == 'transfer') {
84       // 显隐列初始默认隐藏列
85       for (let item in this.columns) {
86         if (this.columns[item].visible === false) {
87           this.value.push(parseInt(item));
88         }
89       }
90     }
91   },
92   methods: {
93     // 搜索
94     toggleSearch() {
95       this.$emit("update:showSearch", !this.showSearch);
96     },
97     // 刷新
98     refresh() {
99       this.$emit("queryTable");
100     },
101     // 右侧列表元素变化
102     dataChange(data) {
103       for (let item in this.columns) {
104         const key = this.columns[item].key;
105         this.columns[item].visible = !data.includes(key);
106       }
107     },
108     // 打开显隐列dialog
109     showColumn() {
110       this.open = true;
111     },
112     // 勾选
113     checkboxChange(event, label) {
114       this.columns.filter(item => item.label == label)[0].visible = event;
115     }
116   },
117 };
118 </script>
119 <style lang="scss" scoped>
120 ::v-deep .el-transfer__button {
121   border-radius: 50%;
122   padding: 12px;
123   display: block;
124   margin-left: 0px;
125 }
126 ::v-deep .el-transfer__button:first-child {
127   margin-bottom: 10px;
128 }
129 </style>