Mr.Shi
2023-09-19 a5e6e7061cbef6912f294dcfd2cb88f472f8ca6f
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
<template>
    <TableLayout :permissions="['business:brand:query']">
      <!-- 搜索表单 -->
      <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline>
        <el-form-item label="品牌名称" prop="name">
          <el-input v-model="searchForm.name" placeholder="请输入品牌名称" @keypress.enter.native="search"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="searchForm.type" clearable placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <section>
          <el-button type="primary" @click="search">搜索</el-button>
          <!-- <el-button type="primary" :loading="isWorking.export" v-permissions="['business:brand:exportExcel']" @click="exportExcel">导出</el-button> -->
          <el-button @click="reset">重置</el-button>
        </section>
      </el-form>
      <!-- 表格和分页 -->
      <template v-slot:table-wrap>
        <ul class="toolbar" v-permissions="['business:brand:create']">
          <li><el-button type="primary" @click="$refs.operaBrandWindow.open('新建品牌')" icon="el-icon-plus" v-permissions="['business:brand:create']">新建</el-button></li>
        </ul>
        <el-table
          v-loading="isWorking.search"
          :data="tableData.list"
          stripe
          border
          :header-cell-style="rowStyle"
          :cell-style="rowStyle"
        >
          <el-table-column prop="name" label="品牌名称" min-width="100px"></el-table-column>
          <el-table-column prop="imgurl" label="图标" min-width="100px">
            <template slot-scope="{row}">
                <el-image
                v-if="row.imgurl"
                style="width: 70px; height: 70px"
                :src="row.imgfullurl"
                :preview-src-list="[row.imgfullurl]"
                fit="cover"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="categoryName" label="类型" min-width="100px">
            <template slot-scope="{row}">
              <span v-if="row.type == 0">自建</span>
              <span v-else>拉取</span>
            </template>
          </el-table-column>
          <el-table-column prop="sortnum" label="排序码(升序)" min-width="100px"></el-table-column>
          <el-table-column prop="createDate" label="创建时间" min-width="100px"></el-table-column>
          <el-table-column
            v-if="containPermissions(['business:brand:update', 'business:brand:delete'])"
            label="操作"
            min-width="120"
            fixed="right"
          >
            <template slot-scope="{row}">
              <template v-if="row.type == 0">
                <el-button type="text" @click="edit(row)" icon="el-icon-edit" v-permissions="['business:brand:update']">编辑</el-button>
                <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" v-permissions="['business:brand:delete']">删除</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :pagination="tableData.pagination"
        >
        </pagination>
      </template>
      <!-- 新建/修改 -->
      <OperaBrandWindow ref="operaBrandWindow" @success="handlePageChange"/>
    </TableLayout>
  </template>
  
  <script>
  import BaseTable from '@/components/base/BaseTable'
  import TableLayout from '@/layouts/TableLayout'
  import Pagination from '@/components/common/Pagination'
  import OperaBrandWindow from '@/components/business/OperaBrandWindow'
  export default {
    name: 'Brand',
    extends: BaseTable,
    components: { TableLayout, Pagination, OperaBrandWindow },
    data () {
      return {
        // 搜索
        searchForm: {
          name: '',
          type: ''
        },
        typeList: [
          { name: '自建', id: 0 },
          { name: '拉取', id: 1 }
        ]
      }
    },
    created () {
      this.config({
        module: '品牌',
        api: '/business/brand',
        'field.id': 'id',
        'field.main': 'name'
      })
      this.search()
    },
    methods: {
      rowStyle() {
      return "text-align:center";
    },
        edit(row) {
            let obj = {
                id: row.id,
                name: row.name,
                sortnum: row.sortnum,
                imgurl: row.imgurl,
                fileList: row.imgfullurl ? [ {url: row.imgfullurl} ] : []
            }
            this.$refs.operaBrandWindow.open('编辑品牌', obj)
        }
    }
  }
  </script>