EXEED_manage/src/views/MatManage/_matList/index.vue

<template>
    <div class="main-content">
       <div class="area-form">
           <el-form :inline="true" size="default">
               <el-form-item label="素材名称">
                   <el-input v-model="form.keyword" placeholder="请输入"></el-input>
               </el-form-item>
               <el-form-item label="分组">
                   <el-select v-model="form.groupId" placeholder="请选择">
                       <el-option v-for="item in apiData.groupData" 
                       :key="item.id" :label="item.name" :value="item.id"></el-option>
                   </el-select>
               </el-form-item>
               <el-form-item label="车系">
                   <el-select v-model="form.brandIdList[0]" placeholder="请选择">
                       <el-option v-for="item in apiData.brandData" 
                       :key="item.id" :label="item.name" :value="item.id"></el-option>
                   </el-select>
               </el-form-item>
               <el-form-item label="标签">
                   <el-select v-model="form.tagIdList[0]" placeholder="请选择">
                       <el-option v-for="item in apiData.tagData" 
                       :key="item.id" :label="item.title" :value="item.id"></el-option>
                   </el-select>
               </el-form-item>
               <el-form-item>
                   <el-button type="primary" @click="confirm">查 询</el-button>
                   <el-button @click="reset">重 置</el-button>
               </el-form-item>
           </el-form>
       </div>
       <div class="button-tab">
           <el-button size="default" type="primary" @click="goRelease">上传素材</el-button>
           <el-button size="default" @click="multiDel">批量删除</el-button>
       </div>
       <div class="area-table">
           <el-table :data="tableData.data" size="default" border 
               @selection-change="handleSelect"
               :header-cell-style="{background: '#EEE'}">
               <el-table-column type="selection" width="55" />
               <el-table-column prop="title" label="素材" width="360"></el-table-column>
               <el-table-column prop="tag" label="标签" width="240">
                   <template #default="scope">
                       <el-tag style="margin-right: 8px" v-for="(item,index) in scope.row.tagList" :key="index">
                           {{item.title}}
                        </el-tag>
                   </template>
               </el-table-column>
               <el-table-column prop="groupId" label="分组" :formatter="groupFormatter"></el-table-column>
               <el-table-column prop="brandList" label="车型">
                   <template #default="scope">
                       <el-tag style="margin-right: 8px" v-for="(item,index) in scope.row.brandList" :key="index">
                           {{item.name}}
                        </el-tag>
                   </template>
               </el-table-column>
               <el-table-column prop="creatAt" label="上传时间"></el-table-column>
               <el-table-column prop="action" label="操作" fixed="right" width="240">
                   <template #default="scope">
                        <el-link type="primary" @click="goEdit(scope.row.id)">编辑</el-link>
                        <el-link type="danger" @click="singleDel(scope.row.id)" style="margin-left: 8px">删除</el-link>
                   </template>
               </el-table-column>
           </el-table>
            <el-pagination
                v-model:currentPage="pagination.current"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
            />
       </div>
    </div>
</template>

<script>
import {defineComponent, reactive, ref, watch, getCurrentInstance} from 'vue'
import {groupFormatter} from './config.js'
export default defineComponent({
    name: 'v-questList',
    setup() {
        const form = reactive({
            keyword: '',
            groupId: undefined,
            tagIdList: [],
            brandIdList: [],
        });
        const tableData = reactive({
            data: [],
        });
        const apiData = reactive({
            tagData: [],
            brandData: [],
            groupData: [],
        });
        const selectedKeys = ref([]);
        const { proxy } = getCurrentInstance();
        const pagination = reactive({
            total: 0,
            current: 1,
            pageSize: 10
        });
        return {
            form,proxy,
            apiData,tableData,
            pagination,selectedKeys,
            groupFormatter
        }
    },
    mounted() {
        this.getApi();
        this.getData();
        watch(() => (this.pagination.pageSize), () => {
            this.getData()
        });
        watch(() => (this.pagination.current), () => {
            this.getData()
        })
    },
    methods: {
        getApi() {
            this.proxy.$post("/tag/list", {}).then(res => {
                this.apiData.tagData = res.data.records;
            }).catch(() => {});
            this.proxy.$post("/brand/list", {}).then(res => {
                this.apiData.brandData = res.data.records;
            }).catch(() => {});
            this.proxy.$post("/referenceGroup/list", {}).then(res => {
                this.apiData.groupData = res.data.records;
            }).catch(() => {});
        },
        getData() {
            let obj = Object.assign(this.form, {pageNum: this.pagination.current,pageSize: this.pagination.pageSize})
            this.proxy.$post("/reference/list", obj).then(res => {
                if(res.code == 200) {
                    const data = res.data
                    this.tableData.data = data.records;
                    this.pagination.total = data.total
                } else {
                    this.$message.error(res.msg)
                }
            }).catch(() => {});
        },
        confirm() {
            this.getData()
        },
        reset() {
            this.form.keyword = '';
            this.form.groupId = undefined;
            this.form.tagIdList = [];
            this.form.brandIdList = [];
            this.getData()
        },
        handleSelect(index) {
            let arr = [];
            index.forEach(ele => {
                arr.push(ele.id)
            });
            this.selectedKeys = arr;
        },
        goRelease() {
            this.$router.push({ name: "MatUpload" })
        },
        goEdit(value) {
            this.$router.push({ name: "MatEdit",params:{id:value}})
        },
        //删除
        singleDel(id) {
            this.$alert(
                '是否删除?', //文字
                '删除', //标题
                {type: 'warning'}
            ).then(() => {
                this.proxy.$post("/reference/del", {idList: [id]}).then(res => {
                    this.getData();
                    this.$message.success(res.data);
                }).catch(() => {});
            }).catch(() => {})
        },
        multiDel() {
            this.$alert(
                '是否删除选中的素材?', //文字
                '删除', //标题
                {type: 'warning'}
            ).then(() => {
                this.proxy.$post("/reference/del", {idList: this.selectedKeys}).then(res => {
                    this.getData();
                    this.$message.success(res.data);
                    this.selectedKeys = [];
                }).catch(() => {});
            }).catch(() => {})
        }
    }
})
</script>

<style lang="less" scoped>
.area-table {
    margin-top: 16px
}
</style>