搜索组件--列表组件--分页组件_搜索目录中组件

• 搜索组件

<template>
  <div class="search-content-box">
    <el-form
      ref="ruleForm"
      :label-width="formdata.labelWidth"
      :inline="formdata.inline"
      class="demo-form-inline"
      :model="formdata"
    >
      <el-form-item
        v-for="(item,index) in formdata.formprops"
        :key="'form'+index"
        :label="item.label"
        :rules="item.required || []"
        :prop="'formprops.' + index + '.value'"
      >
        <!-- input -->
        <el-input
          v-if="item.formtype==='input'"
          v-model="item.value"
          :type="item.type=='textarea'?'textarea':'input'"
          :clearable="item.clearable"
          :style="item.style || ''"
          :class="item.className || ''"
          :size="item.size ||'small' "
          :maxlength="item.maxlength||''"
          :prefix-icon="item.prefix || ''"
          :placeholder="item.placeholder"
          :disabled="item.disabled"
          @keyup.native.enter="search"
          @change="val => {inputChange(val,item.change)}"
        />
        <!-- inputNumber -->
        <el-input-number
          v-else-if="item.formtype==='inputNumber'"
          v-model="item.value"
          :clearable="item.clearable"
          :controls="false"
          :style="item.style || ''"
          :min="1"
          :max="10"
        />
        <!-- select或者远程搜索 -->
        <el-select
          filterable
          v-else-if="item.formtype==='select'"
          v-model="item.value"
          :clearable="item.clearable"
          :remote="item.remote"
          :size="item.size ||'small' "
          :reserve-keyword="item.reserveKeyword"
          :remote-method="item.remoteMethod"
          :multiple="item.multiple"
          :collapse-tags="item.collapseTags"
          :style="item.style || ''"
          :disabled="item.disabled"
          :placeholder="item.placeholder"
           @change="val => {selectChange(val,item.change)}"
          @visible-change="val => {selectVisibleChange(val,item.visibleChange,item.value)}"
        >
          <el-option
            v-for="(selitem,idx) in item.data()"
            :key="idx+'select-s'"
            :label="selitem.label"
            :value="selitem.value"
          />
        </el-select>
        <!-- date -->
        <el-date-picker
          v-else-if="item.formtype==='date'"
          v-model="item.value"
          :clearable="item.clearable"
          :type="item.datetype"
          range-separator="至"
          :size="item.size ||'small' "
          :class="item.datetype == 'daterange'?'cl-change':'cl-nomal'"
          :value-format="item.format"
          :format="item.formatInput ? item.formatInput: ''"
          :placeholder="item.placeholder"
          :start-placeholder="Array.isArray(item.placeholderarr)?item.placeholderarr[0]:''"
          :end-placeholder="Array.isArray(item.placeholderarr)?item.placeholderarr[1]:''"
          :picker-options="item.pickerOptions"
        />
        <!-- cascader级联 -->
        <el-cascader
          v-else-if="item.formtype==='cascader'"
          v-model="item.value"
          :clearable="item.clearable"
          :placeholder="item.placeholder"
          :filterable="item.filterable"
          :options="item.data()"
          :props = item.props||optionProps
          :size="item.size ||'small' "
          :style="item.style || ''"
          @change="val => {handleChange(val,item.change)}"
        >
          <!-- <template slot-scope="{ node, data }">
            <el-tooltip
              :disabled="data.departmentName.length < 11"
              class="item"
              effect="dark"
              :content="data.departmentName"
              placement="top-start"
            >
              <span>{{ hideWords(data.departmentName) }}</span>
            </el-tooltip>
          </template> -->
        </el-cascader>
        <!-- text -->
        <span v-else-if="item.formtype==='text'" :style="item.style || ''" v-html="item.value" />
        <!-- 其他 -->
        <template v-else-if="item.formtype==='render'">
          <expand-dom :column="item" :render="item.render" />
        </template>
        <slot :name="index" />
      </el-form-item>
      <el-form-item v-if="!formdata.bottonflag">
        <el-button
          type="primary"
          class="search-btn"
          size="small"
          icon="el-icon-search"
          @click="search"
        >{{ formdata.btntext }}</el-button>
        <!-- <slot name="last" /> -->
      </el-form-item>
      <el-form-item>
        <slot name="last" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { hideWordsItem } from '@/utils'
export default {
  components: {
    expandDom: {
      functional: true,
      props: {
        render: Function,
        column: {
          type: Object,
          default: null
        }
      },
      render: (h, ctx) => {
        const params = {};
        if (ctx.props.column) params.column = ctx.props.column;
        return ctx.props.render(h, params);
      }
    }
  },
  props: ["formdata"],
  data() {
    return {
     optionProps:{
        value: 'value',
        label: 'label',
        children: 'children',
      },
      arr: {}
    };
  },
  computed: {},
  created() {},
  methods: {
    hideWords(val) {
      return hideWordsItem(val, 15);
    },
    search() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.formdata.formprops.map(item => {
            if (!item.key) {
              return;
            }
            if (Array.isArray(item.key)) {
              if (item.value === null) {
                item.value = [];
              }
              item.key.map((arr, index) => {
                this.arr[item.key[index]] = item.value[index];
              });
            } else {
              if (item.formtype === "cascader" && !item.level) {
                item = JSON.parse(JSON.stringify(item));
                // console.log('单个')
                // this.arr[item.key] = item.value.splice(item.value.length - 1)
                this.arr[item.key] = item.value.length
                  ? [
                      item.value.length,
                      item.value.splice(item.value.length - 1).join()
                    ]
                  : item.value; // 后期可能要传出层级按钮
              } else if (item.formtype === "cascader" && item.level) {
                // console.log('多个')
                item = JSON.parse(JSON.stringify(item));
                this.arr[item.key] = item.value;
              } else {
                // if(item.value == '') {
                //   item.value = null
                // }
                this.arr[item.key] = item.value;
                // console.log('ceshi',  this.arr[item.key])
                // console.log('item.value', item.value)
              }
            }
          });
          this.$emit("searchFn", this.arr);
        } else {
          this.arr = {};
          return false;
        }
      });
      return this.arr;
    },
    filterMethod(val, filter) {
      if (filter) {
        console.log(val, filter, "filter变化");
        return this.$emit("filterMethod", val);
      }
    },
    selectChange(val, change) {
      if (change) {
        console.log(val, change, 'change变化')
        return this.$emit('selectChange', val)
      }
    },
    selectVisibleChange(val, change, item) {
      if (change && !val) {
        return this.$emit("selectVisibleChange", item);
      }
    },
    inputChange(val, change) {
      if (change) {
        return this.$emit("inputChange", val);
      }
    },
    handleChange(val, change) {
      if (change) {
        console.log(val,'val')
        return this.$emit("cascaderChange", val);
      }
    },
  }
};
</script>
<style lang='scss' scoped>
@import "@/styles/base";
.search-content-box {
  // /deep/.el-input__inner {
  //   height: 32px;
  // }
  /deep/ .el-form-item__content{

    .el-date-editor .el-range-separator{
      padding:0px;
    }
  }
  // border-top: solid 1px #efefef;
  // padding-top:24px;
  padding:24px 24px 0 24px;
  background: #fff;
  /deep/ .el-form-item{
    margin-bottom:24px;
  }
  // /deep/ .el-range-editor--small.el-input__inner {
  //   width: 350px;
  // /deep/ .el-range-editor--small.el-input__inner{
  //     width: 330px;
  // }
  .cl-change{
      width: 310px;
  }
}
/deep/.el-form-item__content {
  line-height: 32px;
}

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280

• 搜索组件使用

<searchForm :formdata="formdata" @searchFn="searchFn" ref="searchForm">
        <template slot="last">
          <el-button
            class="onresetClickAdvan"
            size="small"
            icon="el-icon-refresh-left"
            @click="resetSearch"
            >重置</el-button
          >
        </template>
      </searchForm>


 formdata: {
        // 搜索组件数据
        inline: true, // true 横向false竖向
        bottonflag: false, // 查询按钮 true 是不显示
        btntext: '查询',
        labelWidth: '90px',
        formprops: [
          {
            placeholder: '请输入溯源海报名称',
            formtype: 'input',
            clearable: true,
            filterable: true,
            change: true,
            value: '',
            key: 'codeName'
          },
          {
            placeholder: '二维码状态',
            formtype: 'select',
            clearable: true,
            filterable: true,
            change: true,
            value: '',
            key: 'status',
            data: () => {
              return this.statusArr
            }
          },
          {
            placeholder: '活动渠道',
            formtype: 'select',
            clearable: true,
            filterable: true,
            change: true,
            value: '',
            key: 'actType',
            data: () => {
              return this.channelArr
            }
          },
          {
            formtype: 'date',
            datetype: 'datetimerange',
            format: 'yyyy-MM-dd HH:mm:ss',
            size: 'small',
            placeholderarr: ['活动开始时间', '活动结束时间'],
            pickerOptions: '',
            clearable: true,
            filterable: true,
            value: [],
            key: ['actStartTime', 'actEndTime']
          }
        ]
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

• tabel 组件

<template>
  <div class="zd-content-page-box">
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      ref="multipleTable"
      :height="tableHeight"
      style="width: 100%"
      :header-cell-style="{background:'#F2F4F7',fontSize: '15px',fontWeight: '400',color:'#303133'}"
      empty-text
      @selection-change="handleSelectionChange"
    >
      <!-- 无数据提示 -->
      <slot slot="empty" >{{noData}}</slot>
      <!-- 勾选框 -->
      <el-table-column v-if="selection" type="selection" width="60" :fixed="selectionFixed" :selectable = 'selectDisableRoom' ></el-table-column>
      <template v-for="(item, index) in tableColumns">
        <!-- 操作 -->
        <slot v-if="item.slot" :name="item.slot"></slot>
        <el-table-column
          v-else
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :label="item.label"
          :min-width="item.minWidth"
          :width="item.width ? item.width : ''"
          :align="item.align ?item.align : 'center'"
          :sortable="item.sortable ?item.sortable :false"
          :show-overflow-tooltip="item.showTooltip ? item.showTooltip :false"
        >
          <template slot-scope="scope">
            <span>{{ handelData(scope.row[item.prop]) }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div v-if="total > 0">
      <!-- 分页 -->
      <pagination :pageNum="page" :pageSize="rows" :total="total" @sizeChange="handleSizeChange" @currentChange="handleCurrentChange"></pagination>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/pagination'
import { stringify } from 'querystring'
import { toUnicode } from 'punycode'
export default {
  components: {
    pagination
  },
  props: {
    tableData: {
      // 表格数据
      type: Array,
      default: () => {
        return []
      }
    },
    tableColumns: {
      // 表头数据
      type: Array,
      default: () => {
        return []
      }
    },
    tableHeight: {
      // 表格高度
      type: Number || String,
      default: () => {
        return null
      }
    },
    selectionFixed: {
      // 列固定
      type: Boolean || String,
      default: () => {
        return false
      }
    },
    fixed: {
      // 列固定
      type: Boolean || String,
      default: () => {
        return false
      }
    },
    selection: {
      // 勾选框
      type: Boolean,
      default: () => {
        return false
      }
    },
    noData: {
      type: String,
      default: () => {
        return '暂无数据'
      }
    },
    total: {
      // 总页数
      type: Number || String,
      default: () => {
        return 0
      }
    },
    page: {
      // 当前页
      type: Number || String,
      default: () => {
        return 1
      }
    },
    rows: {
      // 页码
      type: Number || String,
      default: () => {
        return 10
      }
    },
    tableLoading: {
      type: Boolean,
      default: () => {
        return false
      }
    }
    // selectDisableRoom: {
    //   type: Function,
    //   default:()=>{
    //     return
    //   }
    // }
    // isPagination: {
    //   // 是否显示分页
    //   type: Boolean,
    //   default: () => {
    //     return true;
    //   }
    // }

  },
  data () {
    return {

    }
  },
  mounted () {},
  methods: {
    selectDisableRoom (row, index) {
      if (row.select) {
        return false
      }
      return true
    },
    handelData (val) {
      if (val == '0') {
        return '0'
      } else if (val) {
        return val
      } else {
        return '--'
      }
    },
    // 多选事件
    handleSelectionChange (val) {
      this.$emit('handleSelectionChange', val)
    },
    // 切换当前一页展示多少条
    handleSizeChange (val) {
      this.$emit('handleChange', { pageSize: val, pageNum: 1 })
    },
    // 翻页
    handleCurrentChange (val) {
      console.log('handleCurrentChange', val)
      this.$emit('handleChange', { pageNum: val, pageSize: this.rows })
    }
  }
}
</script>
<style lang="scss" scoped>
.zd-content-page-box {
  width: 100%;
  /deep/ .el-table thead {
    color: #909399;
    font-weight: 500;
  }
  /deep/ .el-table--border th,
  .el-table__fixed-right-patch {
    background: rgb(242, 244, 247);
  }
}
//  /deep/.el-tabs {
//     .el-tabs__header {
//       margin-bottom: 14px;
//     }
//     .el-tabs__item span {
//       padding: 0 8px;
//     }
//     .btn-group {
//       display: inline-block;
//     }
//     .is-active {
//       font-weight: bold;
//     }
//   }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209

• table 使用

 <myTable
        ref="myTable"
        :tableData="tableData"
        :tableColumns="tableColumns"
        :selection="true"
        :total="total"
        :rows="page.pageSize"
        :page="page.pageNum"
        @handleChange="handleChange"
      >
        <el-table-column slot="forceTime" label="有效时间">
          <template slot="header" slot-scope="">
            有效时间
            <el-popover
              placement="top-start"
              title="说明"
              width="200"
              trigger="hover"
              content="有效时间：溯源二维码的有效使用时间。"
            >
              <i
                slot="reference"
                style="color: #999"
                class="el-icon-question"
              ></i>
            </el-popover>
          </template>
          <template slot-scope="scope">
            <p>{{ scope.row.forceTime }}</p>
          </template>
        </el-table-column>
        <el-table-column slot="activice" label="关联活动">
          <template slot-scope="scope">
            <div class="code-link-icon">
              <i @click="openDialogAct(scope.row)" class="el-icon-link"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          slot="operate"
          label="操作"
          align="center"
          width="180px"
          fixed="right"
        >
          <template slot-scope="scope">
            <div class="code-list-opreat">
              <el-button
                type="text"
                v-if="scope.row.status !== 0 && scope.row.status !== 1"
                @click="goDateListBtn(scope.row)"
                >数据统计</el-button
              >
              <el-button type="text" @click="goPreviewRootBtn(scope.row)"
                >预览</el-button
              >
              <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-if="scope.row.status == 0"
                    @click.native="seoQrcodeBtn(scope.row)"
                    >推广</el-dropdown-item
                  >
                  <el-dropdown-item
                    v-if="
                      scope.row.status == 0 ||
                      scope.row.status == 1 ||
                      scope.row.status == 2
                    "
                    @click.native="editQrcodeBtn(scope.row)"
                    >编辑</el-dropdown-item
                  >
                  <el-dropdown-item @click.native="delQrcodeBtn(scope.row)"
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </myTable>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

• tabel 里面可以使用插槽 slot 改变 样式问题

   tableColumns: [
        // 表头数据
        { label: '溯源海报名称', prop: 'codeName', minWidth: '180' },
        { label: '活动渠道', prop: 'actTypeDes', showTooltip: true },
        { label: '有效时间', prop: 'forceTime', slot: 'forceTime' },
        { label: '状态', prop: 'statusDes' },
        { label: '关联活动', slot: 'activice' },
        { label: '操作', prop: 'name4', slot: 'operate' }
      ],
1
2
3
4
5
6
7
8
9

• mixins 里面的方法

import request from '@/base/service'
// const baseURL = process.env.VUE_APP_MARKETING_API

const requestB = (data) => {
  return request({
    ...data,
    ...{
      baseURL: this.urlList.list.baseURL
    }
  })
}

export const tableMixin = {
  data() {
    return {
      // 搜索填充数据
      formdata: [],
      // 搜索数据
      searchData: {},
      // 分页
      page: {
        pageSize: 10,
        pageNum: 1
      },
      // 数量
      total: 0,
      // 数据
      tableData: [],
      // 表字段
      tableColumns: [],
      // loading动画
      tableloading: false
    }
  },
  computed: {

  },
  /**
     * @desc  export const urlList = {
                            list: {
                            url: '/backSourceCode/pageList',
                            method: 'post',
                            baseUrl:process.env.VUE_APP_MARKETING_API
                            }
                        }
    */
  methods: {
    // 获取列表数据
    getData() {
      const that = this
      that.tableloading = true
      // 传入api  api类型   搜索信息（父页面定义）
      const params = {
        url: that.urlList.list.url,
        method: that.urlList.list.method.toUpperCase() === 'POST' ? 'post' : 'get',
        baseURL: that.urlList.list.baseURL
      }
      if (that.urlList.list.method.toUpperCase() === 'POST') {
        params.data = that.getClearJson({ ...that.searchData, ...that.page })
      } else {
        params.params = that.getClearJson({ ...that.searchData, ...that.page })
      }
      request(params).then(res => {
        that.tableData = that.Global.transformEmptyObject(res.data.list) // 列表信息为空 时转换成--
        that.total = Number(res.data.total)
      }).finally(() => {
        that.tableloading = false
      })
    },
    // 分页改变
    handleChange (val) {
      this.page = { ...val }
      this.getData()
    },
    // 删除方法
    handel_del(key, method, val) {
      const that = this
      this.$confirm({
        title: '温馨提示',
        msg: '确认删除吗？'
      }).then(() => {
        var reqdata = {}
        reqdata[key] = val
        const params = {
          url: that.urlList.list.del,
          method: that.urlList.list.method.toUpperCase() === 'POST' ? 'post' : 'get',
          baseURL: that.urlList.list.baseURL
        }
        if (that.urlList.list.method.toUpperCase() === 'POST') {
          params.data = that.getClearJson({ ...reqdata })
        } else {
          params.params = that.getClearJson({ ...reqdata })
        }
        request(params).then((res) => {
          if (res.code === 200) {
            that.$Message.success('删除成功')
            that.getData()
          } else {
            that.$Message.error(res.message)
          }
        })
      })
    },
    // 搜素
    searchFn (val) {
      this.searchData = { ...val }
      this.page.pageNum = 1
      this.getData()
    },
    // 重置
    resetSearch () {
      this.$nextTick(() => {
        const searchForm = this.$refs.searchForm
        searchForm.$refs.ruleForm.resetFields()
        this.page.pageNum = 1
        this.getData()
      })
    },
    // 清除请求中的空字段
    getClearJson(data) {
      const _data = {}
      for (const prop in data) {
        const item = data[prop]
        if (item != undefined && item) {
          _data[prop] = item
        }
      }
      return _data
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132