Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
37dfa3c3 by renchao@pashanhoo.com
Options

style:下拉表格选择

1 parent 6308b126
Inline Side-by-side
Showing 3 changed files with 308 additions and 2 deletions
1 <!--
2 * @Descripttion: 表格选择器组件
3 * @version: 1.3
4 * @Author: sakuya
5 * @Date: 2021年6月10日10:04:07
6 * @LastEditors: Please set LastEditors
7 * @LastEditTime: 2023-06-29 11:14:11
8 -->
9
10 <template>
11 <el-select ref="select" v-model="defaultValue" :size="size" :clearable="clearable" :multiple="multiple" :collapse-tags="collapseTags"
12 :collapse-tags-tooltip="collapseTagsTooltip" :filterable="filterable" :placeholder="placeholder" :disabled="disabled" :filter-method="filterMethod"
13 @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear">
14 <template #empty>
15 <div class="sc-table-select__table" :style="{width: tableWidth+'px'}" v-loading="loading">
16 <div class="sc-table-select__header">
17 <slot name="header" :form="formData" :submit="formSubmit"></slot>
18 </div>
19 <el-table ref="table" :data="tableData" :height="245" :highlight-current-row="!multiple" @row-click="click" @select="select" @select-all="selectAll">
20 <el-table-column v-if="multiple" type="selection" width="45"></el-table-column>
21 <el-table-column v-else type="index" width="45">
22 <template #default="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span></template>
23 </el-table-column>
24 <slot></slot>
25 </el-table>
26 <div class="sc-table-select__page">
27 <el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:currentPage="currentPage"
28 @current-change="reload"></el-pagination>
29 </div>
30 </div>
31 </template>
32 </el-select>
33 </template>
34
35 <script>
36 import config from "./tableSelect";
37
38 export default {
39 props: {
40 modelValue: null,
41 apiObj: { type: Object, default: () => { } },
42 placeholder: { type: String, default: "请选择" },
43 size: { type: String, default: "small" },
44 clearable: { type: Boolean, default: false },
45 multiple: { type: Boolean, default: false },
46 filterable: { type: Boolean, default: false },
47 collapseTags: { type: Boolean, default: false },
48 collapseTagsTooltip: { type: Boolean, default: false },
49 disabled: { type: Boolean, default: false },
50 tableWidth: { type: Number, default: 400 },
51 mode: { type: String, default: "popover" },
52 props: { type: Object, default: () => { } }
53 },
54 data () {
55 return {
56 loading: false,
57 keyword: null,
58 defaultValue: [],
59 tableData: [],
60 pageSize: config.pageSize,
61 total: 0,
62 currentPage: 1,
63 defaultProps: {
64 label: config.props.label,
65 value: config.props.value,
66 page: config.request.page,
67 pageSize: config.request.pageSize,
68 keyword: config.request.keyword
69 },
70 formData: {}
71 }
72 },
73 computed: {
74
75 },
76 watch: {
77 modelValue: {
78 handler () {
79 this.defaultValue = this.modelValue
80 this.autoCurrentLabel()
81 },
82 deep: true
83 }
84 },
85 mounted () {
86 this.defaultProps = Object.assign(this.defaultProps, this.props);
87 this.defaultValue = this.modelValue
88 this.autoCurrentLabel()
89 },
90 methods: {
91 //表格显示隐藏回调
92 visibleChange (visible) {
93 if (visible) {
94 this.currentPage = 1
95 this.keyword = null
96 this.formData = {}
97 this.getData()
98 } else {
99 this.autoCurrentLabel()
100 }
101 },
102 //获取表格数据
103 async getData () {
104 this.loading = true;
105 var reqData = {
106 [this.defaultProps.page]: this.currentPage,
107 [this.defaultProps.pageSize]: this.pageSize,
108 [this.defaultProps.keyword]: this.keyword
109 }
110 Object.assign(reqData, this.formData)
111 // var res = await this.apiObj.get(reqData);
112 let res = {
113 code: 200,
114 data: {
115 total: 2, rows: [
116 {
117 user: 11111111111,
118 id: 111111111111
119 },
120 {
121 user: 2222222222222,
122 id: 22222222222
123 }
124 ]
125 },
126 message: ""
127 }
128 var parseData = config.parseData(res)
129 this.tableData = parseData.rows;
130 this.total = parseData.total;
131 this.loading = false;
132 //表格默认赋值
133 this.$nextTick(() => {
134 if (this.multiple) {
135 this.defaultValue.forEach(row => {
136 var setrow = this.tableData.filter(item => item[this.defaultProps.value] === row[this.defaultProps.value])
137 if (setrow.length > 0) {
138 this.$refs.table.toggleRowSelection(setrow[0], true);
139 }
140 })
141 } else {
142 var setrow = this.tableData.filter(item => item[this.defaultProps.value] === this.defaultValue[this.defaultProps.value])
143 this.$refs.table.setCurrentRow(setrow[0]);
144 }
145 this.$refs.table.setScrollTop(0)
146 })
147 },
148 //插糟表单提交
149 formSubmit () {
150 this.currentPage = 1
151 this.keyword = null
152 this.getData()
153 },
154 //分页刷新表格
155 reload () {
156 this.getData()
157 },
158 //自动模拟options赋值
159 autoCurrentLabel () {
160 this.$nextTick(() => {
161 if (this.multiple) {
162 this.$refs.select.selected.forEach(item => {
163 item.currentLabel = item.value[this.defaultProps.label]
164 })
165 } else {
166 this.$refs.select.selectedLabel = this.defaultValue[this.defaultProps.label]
167 }
168 })
169 },
170 //表格勾选事件
171 select (rows, row) {
172 var isSelect = rows.length && rows.indexOf(row) !== -1
173 if (isSelect) {
174 this.defaultValue.push(row)
175 } else {
176 this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1)
177 }
178 this.autoCurrentLabel()
179 this.$emit('update:modelValue', this.defaultValue);
180 this.$emit('change', this.defaultValue);
181 },
182 //表格全选事件
183 selectAll (rows) {
184 var isAllSelect = rows.length > 0
185 if (isAllSelect) {
186 rows.forEach(row => {
187 var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
188 if (!isHas) {
189 this.defaultValue.push(row)
190 }
191 })
192 } else {
193 this.tableData.forEach(row => {
194 var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
195 if (isHas) {
196 this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1)
197 }
198 })
199 }
200 this.autoCurrentLabel()
201 this.$emit('update:modelValue', this.defaultValue);
202 this.$emit('change', this.defaultValue);
203 },
204 click (row) {
205 if (this.multiple) {
206 //处理多选点击行
207 } else {
208 this.defaultValue = row
209 this.$refs.select.blur()
210 this.autoCurrentLabel()
211 this.$emit('update:modelValue', this.defaultValue);
212 this.$emit('change', this.defaultValue);
213 }
214 },
215 //tags删除后回调
216 removeTag (tag) {
217 var row = this.findRowByKey(tag[this.defaultProps.value])
218 this.$refs.table.toggleRowSelection(row, false);
219 this.$emit('update:modelValue', this.defaultValue);
220 },
221 //清空后的回调
222 clear () {
223 this.$emit('update:modelValue', this.defaultValue);
224 },
225 // 关键值查询表格数据行
226 findRowByKey (value) {
227 return this.tableData.find(item => item[this.defaultProps.value] === value)
228 },
229 filterMethod (keyword) {
230 if (!keyword) {
231 this.keyword = null;
232 return false;
233 }
234 this.keyword = keyword;
235 this.getData()
236 },
237 // 触发select隐藏
238 blur () {
239 this.$refs.select.blur();
240 },
241 // 触发select显示
242 focus () {
243 this.$refs.select.focus();
244 }
245 }
246 }
247 </script>
248
249 <style scoped>
250 .sc-table-select__table {
251 padding: 12px;
252 }
253 .sc-table-select__page {
254 padding-top: 12px;
255 }
256 </style>
1 /*
2 * @Description:
3 * @Autor: renchao
4 * @LastEditTime: 2023-06-29 11:05:49
5 */
6 //表格选择器配置
7
8 export default {
9 pageSize: 10, //表格每一页条数
10 parseData: function (res) {
11 return {
12 data: res.data,
13 rows: res.data.rows, //分析行数据字段结构
14 total: res.data.total, //分析总数字段结构
15 msg: res.message, //分析描述字段结构
16 code: res.code //分析状态字段结构
17 }
18 },
19 request: {
20 page: 'page', //规定当前分页字段
21 pageSize: 'pageSize', //规定一页条数字段
22 keyword: 'keyword' //规定搜索字段
23 },
24 props: {
25 label: 'label', //映射label显示字段
26 value: 'value', //映射value值字段
27 }
28 }
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-05-25 08:59:02 4 * @LastEditTime: 2023-06-29 11:13:35
5 --> 5 -->
6 <template> 6 <template>
7 <!-- 受理信息 --> 7 <!-- 受理信息 -->
...@@ -131,6 +131,15 @@ ...@@ -131,6 +131,15 @@
131 </el-form-item> 131 </el-form-item>
132 </el-col> 132 </el-col>
133 133
134 <el-col :span="8">
135 <el-form-item label="下拉表格测试：">
136 <select-table v-model="value2" :table-width="600" :props="props" @change="change">
137 <el-table-column prop="id" label="ID" width="180"></el-table-column>
138 <el-table-column prop="user" label="姓名"></el-table-column>
139 </select-table>
140 </el-form-item>
141 </el-col>
142
134 </el-row> 143 </el-row>
135 144
136 <div class="slxx_title title-block"> 145 <div class="slxx_title title-block">
...@@ -203,7 +212,9 @@ ...@@ -203,7 +212,9 @@
203 import { mapGetters } from "vuex" 212 import { mapGetters } from "vuex"
204 import { Init, saveData } from "@/api/workflow/tdsyqFlow.js" 213 import { Init, saveData } from "@/api/workflow/tdsyqFlow.js"
205 import qlrCommonTable from "@/views/workflow/components/qlrCommonTable" 214 import qlrCommonTable from "@/views/workflow/components/qlrCommonTable"
215 import selectTable from '@/components/selectTable/index.vue'
206 export default { 216 export default {
217 components: { qlrCommonTable, selectTable },
207 mounted () { 218 mounted () {
208 this.ableOperation = this.$parent.currentSelectTab.ableOperation 219 this.ableOperation = this.$parent.currentSelectTab.ableOperation
209 this.propsParam = this.$attrs; 220 this.propsParam = this.$attrs;
...@@ -222,12 +233,22 @@ ...@@ -222,12 +233,22 @@
222 }) 233 })
223 }) 234 })
224 }, 235 },
225 components: { qlrCommonTable }, 236
226 computed: { 237 computed: {
227 ...mapGetters(["dictData", "flag"]) 238 ...mapGetters(["dictData", "flag"])
228 }, 239 },
229 data () { 240 data () {
230 return { 241 return {
242 value2: {
243 id: "520000198407304275",
244 user: "史平"
245 },
246 props: {
247 label: 'user',
248 value: 'id',
249 keyword: "keyword"
250 },
251
231 //表单是否可操作 252 //表单是否可操作
232 ableOperation: true, 253 ableOperation: true,
233 key: 0, 254 key: 0,
...@@ -241,6 +262,7 @@ ...@@ -241,6 +262,7 @@
241 } 262 }
242 }, 263 },
243 methods: { 264 methods: {
265 change () { },
244 // 更新权利人信息 266 // 更新权利人信息
245 upDateQlrxxList (val) { 267 upDateQlrxxList (val) {
246 this.ruleForm.qlrList && (this.ruleForm.qlrList = _.cloneDeep(val)) 268 this.ruleForm.qlrList && (this.ruleForm.qlrList = _.cloneDeep(val))
......