|
@@ -0,0 +1,152 @@
|
|
|
+<template>
|
|
|
+ <div id="column">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="info">
|
|
|
+ <el-col :span="24" class="list">
|
|
|
+ <template>
|
|
|
+ <el-col :span="24" class="search">
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-select v-model="field" filterable clearable placeholder="请选择所属领域" @change="changeField">
|
|
|
+ <el-option v-for="(item, index) in fieldList" :key="index" :value="item.name" :label="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-radio-group v-model="radio1" @change="changeRadio">
|
|
|
+ <el-radio label="0" border>是我处支持范围</el-radio>
|
|
|
+ <el-radio label="1" border>不是我处支持范围</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-table :data="list" style="width: 100%" border>
|
|
|
+ <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
|
|
|
+ <el-table-column prop="name" label="商品名称 " align="center"> </el-table-column>
|
|
|
+ <el-table-column prop="field" label="所属领域 " align="center"> </el-table-column>
|
|
|
+ <el-table-column prop="cooperation" label="合作方式 " align="center"> </el-table-column>
|
|
|
+ <el-table-column prop="contacts" label="联系人 " align="center"> </el-table-column>
|
|
|
+ <el-table-column prop="phone" label="联系电话 " align="center"> </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-col :span="24" class="page">
|
|
|
+ <el-pagination
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ :page-size="pageSize"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { createNamespacedHelpers, mapGetters, mapState } from 'vuex';
|
|
|
+const { mapActions: dock } = createNamespacedHelpers('dock');
|
|
|
+const { mapActions: markettype } = createNamespacedHelpers('markettype');
|
|
|
+import _ from 'loadsh';
|
|
|
+export default {
|
|
|
+ name: 'column',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data: () => ({
|
|
|
+ applyList: [], //查询数据
|
|
|
+ currentPage: 1, //默认数据1
|
|
|
+ pageSize: 10, //每页显示数据数量
|
|
|
+ origin: [], //分割数据
|
|
|
+ list: [], //显示数据列表
|
|
|
+ total: 0,
|
|
|
+ // 所属领域
|
|
|
+ fieldList: [],
|
|
|
+ field: '',
|
|
|
+ // 是否我处支持
|
|
|
+ radio1: '',
|
|
|
+ }),
|
|
|
+ created() {
|
|
|
+ this.search();
|
|
|
+ this.searchtype();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...dock(['query', 'delete', 'update', 'fetch']),
|
|
|
+ ...markettype({ markettypeList: 'query' }),
|
|
|
+ async search({ skip = 0, limit = 10, ...info } = {}) {
|
|
|
+ let res = await this.fetch(this.user.remark);
|
|
|
+ let arr = res.data.apply.map(item => item.goodsList);
|
|
|
+ arr = _.flattenDeep(arr);
|
|
|
+ var newArr = arr.filter(item => item.type === '1');
|
|
|
+ this.$set(this, `applyList`, newArr);
|
|
|
+ this.$set(this, `total`, newArr.length);
|
|
|
+ },
|
|
|
+ // 查询字典表
|
|
|
+ async searchtype() {
|
|
|
+ // 所属领域;
|
|
|
+ let res = await this.markettypeList({ category: '01' });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `fieldList`, res.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ searchPage(page = 1) {
|
|
|
+ this.$set(this, `list`, this.origin[page - 1]);
|
|
|
+ },
|
|
|
+ handleCurrentChange(currentPage) {
|
|
|
+ this.searchPage(currentPage);
|
|
|
+ },
|
|
|
+ // 筛选技术领域
|
|
|
+ changeField(value) {
|
|
|
+ var arr = this.applyList.filter(item => item.field === value);
|
|
|
+ this.$set(this, `list`, arr);
|
|
|
+ this.$set(this, `total`, arr.length);
|
|
|
+ },
|
|
|
+ // 筛选是否是我处支持
|
|
|
+ changeRadio() {},
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ pageTitle() {
|
|
|
+ return `${this.$route.meta.title}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ applyList: {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ handler(val) {
|
|
|
+ if (val && val.length > 0) this.$set(this, `origin`, _.chunk(val, this.pageSize));
|
|
|
+ this.searchPage();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.top {
|
|
|
+ padding: 15px 0;
|
|
|
+ border-bottom: 1px solid #cccc;
|
|
|
+}
|
|
|
+.top .topTitle {
|
|
|
+ padding: 0 10px;
|
|
|
+}
|
|
|
+.top .topAdd {
|
|
|
+ padding: 0 10px 0 0;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.search {
|
|
|
+ padding: 0 0 18px 0;
|
|
|
+}
|
|
|
+.anniu {
|
|
|
+ padding: 0 10px 0 0;
|
|
|
+ /deep/.el-button {
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.page {
|
|
|
+ padding: 20px 0;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|