spfm-market-front/src/pages/main/meetingDeclaration/marketDecisionMeeting.vue

<template>
    <fullscreen :fullscreen.sync="fullscreen" class="container">
        <div class="container-box">
            <toolList @iconCli="iconCli" :tooltit="tooltit"></toolList>
            <div class="search">
                <div class="search-item">
                    <label>年份</label>
                    <el-date-picker
                        v-model="year"
                        type="year"
                        placeholder="年份"
                        value-format="yyyy"
                    >
                    </el-date-picker>
                </div>
                <div class="search-item">
                    <label>月份</label>
                    <el-select clearable v-model="month" placeholder="月份">
                        <el-option
                            v-for="i in monthOpt"
                            :key="i"
                            :label="`${i}月`"
                            :value="`${i}`"
                        >
                        </el-option>
                    </el-select>
                </div>
                <el-button
                    class="btn-check"
                    size="medium"
                    type="primary"
                    plain
                    icon="el-icon-search"
                    @click="searchInfo"
                    >搜索
                </el-button>
            </div>
            <div class="tabbox">
                <el-table
                    height="calc(100% - 40px)"
                    class="com-table"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    size="small"
                    border
                    style="width: 100%"
                    v-loading="loading"
                >
                    <el-table-column label="会议时间"  align="center">
                        <template slot-scope="scope">
                            <span>{{
                                $formatDate(scope.row.meetingTime, "YYYY-MM-DD")
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="meetingName" label="会议名称"  align="center">
                    </el-table-column>
                    <el-table-column label="操作" width="300px" align="center">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                @click="jump(2, scope.row)"
                                >上传</el-button
                            >
                            <el-button
                                size="mini"
                                type="primary"
                                @click="jump(1, scope.row)"
                                >查看及导出</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="pageBox"
                    @current-change="currchange"
                    layout="prev, pager, next"
                    background
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>

        <el-dialog
            :title="titname"
            :visible.sync="dialogStatus"
            width="70%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="closedia"
            :fullscreen="false"
        >
            <div v-loading="loadinged">
                <el-table
                    :data="infoTableData"
                    border
                    size="mini"
                    style="margin: 20px 0;"
                >
                    <el-table-column prop="serialNumber" label="序号">
                    </el-table-column>
                    <el-table-column label="线条">
                        <template slot-scope="scope">
                            <span>{{
                                billOpt[scope.row.topicsType].billName
                            }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="topicsName" label="议题名称">
                    </el-table-column>
                    <el-table-column prop="remark" label="概要">
                    </el-table-column>
                    <el-table-column prop="declarantApply" label="需参加部门">
                    </el-table-column>
                    <el-table-column prop="dept" label="申报人部门">
                    </el-table-column>
                    <el-table-column prop="department" label="申报科室">
                    </el-table-column>
                    <el-table-column prop="declarant" label="申报人姓名">
                    </el-table-column>
                    <el-table-column prop="reporting" label="汇报时长(小时)">
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width="150px"
                        align="center"
                        fixed="right"
                    >
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                @click="jump(3, scope.row)"
                                >编辑</el-button
                            >
                            <el-button
                                size="mini"
                                type="primary"
                                @click="jump(4, scope.row)"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>

                <div slot="footer" class="dialog-footer myfooter">
                    <el-button type="primary" @click="dialogCli(1)"
                        >全量导出</el-button
                    >
                    <el-button type="primary" @click="closedia">确定</el-button>
                    <el-button @click="closedia">取消</el-button>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            :title="titname"
            :visible.sync="uploadDialogStatus"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="closedia"
            :fullscreen="false"
        >
            <div v-loading="loadinged">
                <el-form :model="infolist" ref="infolist" :rules="rules">
                    <div class="info-line">
                        <el-form-item>
                            <span>序号</span>
                            <el-input
                                v-model="infolist.serialNumber"
                                disabled
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="topicsType">
                            <span>线条</span>
                            <el-select
                                clearable
                                v-model="infolist.topicsType"
                                placeholder="线条"
                            >
                                <el-option
                                    v-for="(items, index) in billOpt"
                                    :key="index"
                                    :label="items.billName"
                                    :value="items.billId"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="topicsName">
                            <span>议题名称</span>
                            <el-input v-model="infolist.topicsName"></el-input>
                        </el-form-item>
                        <el-form-item prop="department">
                            <span>申报科室</span>
                            <el-input v-model="infolist.department"></el-input>
                        </el-form-item>
                        <el-form-item prop="dept">
                            <span>申报部门</span>
                            <el-input v-model="infolist.dept"></el-input>
                        </el-form-item>
                        <el-form-item prop="declarant">
                            <span>申报姓名</span>
                            <el-input v-model="infolist.declarant"></el-input>
                        </el-form-item>
                        <el-form-item prop="declarantApply">
                            <span>需参加部门</span>
                            <el-input
                                v-model="infolist.declarantApply"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="reporting">
                            <span>汇报时长(小时)</span>
                            <el-input
                                v-model="infolist.reporting"
                                oninput="value=value.replace(/[^0-9.]/g,'')"
                            ></el-input>
                        </el-form-item>
                    </div>
                    <div class="info-line2">
                        <el-form-item prop="remark">
                            <span>概要</span>
                            <div class="remark-box">
                                <div style="padding-left: 20px">
                                    <el-input
                                        type="textarea"
                                        v-model="infolist.remark"
                                        maxlength="300"
                                        show-word-limit
                                    ></el-input>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <span>附件</span>
                            <div class="upload-box">
                                <div>
                                    <myUpload
                                        @uploadBack="uploadBack"
                                        :fileInfo="fileInfo"
                                        :fileList="fileInfo.fileList"
                                    >
                                    </myUpload>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                </el-form>

                <div slot="footer" class="dialog-footer myfooter">
                    <el-button type="primary" @click="dialogCli(3)"
                        >保存</el-button
                    >
                    <el-button @click="closedia">取消</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog
            :title="titname"
            :visible.sync="editDialogStatus"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="editClosedia"
            :fullscreen="false"
        >
            <div v-loading="loadinged">
                <el-form
                    :model="editInfolist"
                    ref="editInfolist"
                    :rules="rules"
                >
                    <div class="info-line">
                        <el-form-item>
                            <span>序号</span>
                            <el-input
                                v-model="editInfolist.serialNumber"
                                disabled
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="topicsType">
                            <span>线条</span>
                            <el-select
                                clearable
                                v-model="editInfolist.topicsType"
                                placeholder="线条"
                            >
                                <el-option
                                    v-for="(items, index) in billOpt"
                                    :key="index"
                                    :label="items.billName"
                                    :value="items.billId"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="topicsName">
                            <span>议题名称</span>
                            <el-input
                                v-model="editInfolist.topicsName"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="department">
                            <span>申报科室</span>
                            <el-input
                                v-model="editInfolist.department"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="dept">
                            <span>申报部门</span>
                            <el-input v-model="editInfolist.dept"></el-input>
                        </el-form-item>
                        <el-form-item prop="declarant">
                            <span>申报姓名</span>
                            <el-input
                                v-model="editInfolist.declarant"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="declarantApply">
                            <span>需参加部门</span>
                            <el-input
                                v-model="editInfolist.declarantApply"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="reporting">
                            <span>汇报时长(小时)</span>
                            <el-input
                                v-model="editInfolist.reporting"
                                oninput="value=value.replace(/[^0-9.]/g,'')"
                            ></el-input>
                        </el-form-item>
                    </div>
                    <div class="info-line2">
                        <el-form-item prop="remark">
                            <span>概要</span>
                            <div class="remark-box">
                                <div style="padding-left: 20px">
                                    <el-input
                                        type="textarea"
                                        v-model="editInfolist.remark"
                                        maxlength="300"
                                        show-word-limit
                                    ></el-input>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <span>附件</span>
                            <div class="upload-box">
                                <div>
                                    <myUpload
                                        @uploadBack="uploadBack"
                                        :fileInfo="fileInfo"
                                        :fileList="fileInfo.fileList"
                                    >
                                    </myUpload>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                </el-form>

                <div slot="footer" class="dialog-footer myfooter">
                    <el-button type="primary" @click="dialogCli(4)"
                        >保存</el-button
                    >
                    <el-button @click="editClosedia">取消</el-button>
                </div>
            </div>
        </el-dialog>
        <myMessage
            :messTit="messTit"
            @closeMessage="closeMessage"
            :centerDialogVisible="centerDialogVisible"
            v-if="centerDialogVisible"
        ></myMessage>
    </fullscreen>
</template>
<script>
// import mySearch from "../../../components/search.vue";
import myMessage from "../../../components/myMessage.vue";
import toolList from "../../../components/toolList";
import myUpload from "../../../components/upload";

export default {
    components: {
        // mySearch,
        myMessage,
        toolList,
        myUpload
    },
    data() {
        const reporting = (rule, value, callback) => {
            if (!value) {
                callback(new Error("不能为空"));
            } else if (
                value.indexOf(".") != -1 &&
                value.split(".").length > 2
            ) {
                callback(new Error("请输入正确格式数字")); //防止输入多个小数点
            } else if (
                value.indexOf(".") != -1 &&
                value.split(".")[1].length > 1
            ) {
                callback(new Error("小数点后一位")); //小数点后两位
            } else {
                callback();
            }
        };
        return {
            rules: {
                topicsType: [
                    {
                        required: true,
                        trigger: "change",
                        message: "不能为空"
                    }
                ],
                topicsName: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "不能为空"
                    }
                ],
                department: [
                    {
                        required: true,
                        trigger: "change",
                        message: "不能为空"
                    }
                ],
                dept: [
                    {
                        required: true,
                        trigger: "change",
                        message: "不能为空"
                    }
                ],
                declarant: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "不能为空"
                    }
                ],
                reporting: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: reporting
                    }
                ],
                declarantApply: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "不能为空"
                    }
                ],
                remark: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "不能为空"
                    }
                ]
            },
            tooltit: "",
            fullscreen: false,
            total: 0,
            pageSize: 1,
            tableData: [],
            //点击查看后,table
            infoTableData: [],
            dialogStatus: false,
            disableStatus: false,
            uploadDialogStatus: false,
            editDialogStatus: false,
            titname: "",
            infolist: {},
            editInfolist: {},
            userInfo: {},
            params: {},
            centerDialogVisible: false,
            messTit: "",
            delid: "",
            loading: false,
            loadinged: false,
            fileInfo: {
                limit: 50,
                url: "/market/cMeetingDeclaration/upload",
                fileList: []
            },
            fileList: [], // 回显附件数据源
            attList: [],
            //线条下拉
            billOpt: [
                {
                    billName: "C",
                    billId: "0"
                },
                {
                    billName: "H",
                    billId: "1"
                },
                {
                    billName: "N+线上",
                    billId: "2"
                },
                {
                    billName: "渠道",
                    billId: "3"
                },
                {
                    billName: "业务综合",
                    billId: "4"
                }
            ],
            year: this.$formatDate(new Date().getTime(), "YYYY"),
            month: "",
            mId: "",
            personInfo: [],
            monthOpt: [
                "01",
                "02",
                "03",
                "04",
                "05",
                "06",
                "07",
                "08",
                "09",
                "10",
                "11",
                "12"
            ],
            menus: JSON.parse(window.sessionStorage.childrenMenus)
        };
    },
    methods: {
        jump(v, n) {
            //1 查看 2上传 3编辑修改 4删除一条
            if (v === 1) {
                this.titname = "查看";
                this.dialogStatus = true;

                this.getInfo(n.id);
                this.mId = n.id;
            } else if (v === 2) {
                this.titname = "上传";
                this.uploadDialogStatus = true;
                
                this.attList = [];
                this.fileInfo.fileList = [];
                this.infolist.serialNumber = this.$formatDate(
                    new Date().getTime(),
                    "YYYYMMDDHHmmss"
                );
                if (this.personInfo.length === 2) {
                    this.$set(this.infolist, "dept", this.personInfo[1]);
                } else if (this.personInfo.length === 3) {
                    this.$set(this.infolist, "dept", this.personInfo[1]);
                    this.$set(this.infolist, "department", this.personInfo[2]);
                }
                this.$set(this.infolist, "declarant", this.userInfo.loginName);
                this.infolist.meetingId = n.id;
            } else if (v === 3) {
                this.titname = "编辑";
                this.editDialogStatus = true;

                this.editInfolist = n;
                //                 this.editInfolist.attList = [
                //     {
                //         "id": "202202180519593136",
                //         "fileName": "2021年广告宣传费台账-全省汇总.xlsx",
                //         "fileCode": "202202180519593136",
                //         "opName": "admin",
                //         "opNo": "admin",
                //         "opTime": "2022-02-18 17:19:59"
                //     }
                // ]
                this.attList = [];
                this.editInfolist.attList.forEach(item => {
                    this.fileInfo.fileList.push({
                        name: item.fileName,
                        url: "",
                        id: item.id,
                        fileName: item.fileName,
                        fileCode: item.fileCode,
                        opName: item.opName,
                        opNo: item.opNo,
                        opTime: item.opTime,
                    });
                    this.attList.push({
                        name: item.fileName,
                        url: "",
                        id: item.id,
                        fileName: item.fileName,
                        fileCode: item.fileCode,
                        opName: item.opName,
                        opNo: item.opNo,
                        opTime: item.opTime,
                    });
                });


                // console.log(this.editInfolist);
            } else if (v === 4) {
                this.loadinged = true;
                this.$http({
                    url: "/market/cMeetingDeclaration/delInfo",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: { id: n.id }
                }).then(res => {
                    this.loadinged = false;
                    if (res.data.result === 0) {
                        this.getInfo(n.meetingId);
                    } else {
                        this.$message({
                            message: res.data.desc,
                            type: "error"
                        });
                    }
                });
            }
        },
        //获取信息,查看
        getInfo(n) {
            this.$http({
                url:
                    "market/cMeetingDeclaration/queryMkMeetingDeclarationInfoList",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: { meetingId: n }
            }).then(res => {
                this.infoTableData = res.data;
            });
        },
        closedia() {
            this.infolist = {};
            this.dialogStatus = false;
            this.uploadDialogStatus = false;
        },
        editClosedia() {
            this.editDialogStatus = false;
        },
        //搜索数据
        searchInfo() {
            this.params = {};

            this.year ? (this.params.creatTime = this.year) : "";

            this.month
                ? (this.params.creatTime =
                      (this.year == null
                          ? (this.year = this.$formatDate(
                                new Date().getTime(),
                                "YYYY"
                            ))
                          : this.year) +
                      "-" +
                      this.month)
                : "";

            this.getList(this.params, this.pageSize);
        },
        //获取列表
        getList(v, n) {
            this.pageSize = n;
            // let _this = this;
            this.loading = true;
            this.tableData = [];
            this.$http({
                url:
                    "/market/cMeetingDeclaration/queryMkMeetingDeclarationPageForType2",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + n + '","pageSize":"10"}'
                },
                data: v
            }).then(res => {
                this.tableData = res.data.data;
                this.total = res.data.totalRecord;
                this.loading = false;
            });
        },
        // 分页
        currchange(v) {
            this.pageSize = v;
            this.getList(this.params, this.pageSize);
        },

        //添加
        dialogCli(v) {
            //1全量导出 2确定 3上传提交(新增) 4修改提交
            if (v === 1) {
                this.$http({
                    url: "/market/cMeetingDeclaration/downfile",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    responseType: "blob",
                    data: { meetingId: this.mId }
                }).then(res => {
                    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                        let blob = new Blob([res.data], {
                            type: "application/x-msdownload"
                        });
                        window.navigator.msSaveOrOpenBlob(
                            blob,
                            // this.wo.bizName + ".xlsx"
                            "导出" + ".zip"
                        );
                    } else {
                        /* 火狐谷歌的文件下载方式 */
                        var blob = new Blob([res.data]);
                        var downloadElement = document.createElement("a");
                        var href = window.URL.createObjectURL(blob);
                        downloadElement.href = href;
                        downloadElement.download = "导出" + ".zip";
                        document.body.appendChild(downloadElement);
                        downloadElement.click();
                        document.body.removeChild(downloadElement);
                        window.URL.revokeObjectURL(href);
                    }
                });
            }
            // else if (v === 2) {
            // }
            else if (v === 3) {
                this.$refs.infolist.validate(valid => {
                    if (valid) {
                        //上传提交
                        this.attList.forEach(item => {
                            this.fileList.push({
                                id: item.fileCode,
                                fileCode: item.fileCode,
                                fileName: item.fileName
                            });
                        });

                        this.infolist.attList = this.fileList;

                        this.submitInfo(
                            "market/cMeetingDeclaration/addInfo",
                            this.infolist
                        );
                    }
                });
            } else if (v === 4) {
                
                this.$refs.editInfolist.validate(valid => {
                    if (valid) {
                        this.attList.forEach(item => {
                            this.fileList.push({
                                id: item.fileCode,
                                fileCode: item.fileCode,
                                fileName: item.fileName
                            });
                        });
                        this.editInfolist.attList = this.fileList;
                        this.editInfolist.meetingId = this.mId;
                        this.submitInfo(
                            "/market/cMeetingDeclaration/updateInfo",
                            this.editInfolist
                        );
                    }
                });
            }
        },
        submitInfo(u, param) {
            let _this = this;
            this.loadinged = true;
            this.$http({
                url: u,
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: param
            }).then(res => {
                this.loadinged = false;
                if (res.data.result === 0) {
                    _this.$message({
                        message: "成功",
                        type: "success"
                    });
                    _this.infolist = {};
                    _this.dialogStatus = false;
                    _this.getList({}, _this.pageSize);
                    _this.uploadDialogStatus = false;
                    _this.editDialogStatus = false;
                    _this.attList = [];
                    _this.fileInfo.fileList = [];
                    _this.fileList = [];
                } else {
                    _this.$message({
                        message: res.data.desc,
                        type: "error"
                    });
                }
            });
        },
        closeMessage(v) {
            this.centerDialogVisible = false;
            let _this = this;
            if (v === 1) {
                _this
                    .$http({
                        url: "/market/cadvBusiMetirialWo/del",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        data: {
                            woId: this.delid
                        }
                    })
                    .then(res => {
                        if (res.data.result === 1) {
                            _this.$message({
                                message: res.data.desc,
                                type: "error"
                            });
                        } else {
                            _this.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            _this.getList(this.params, this.pageSize);
                        }
                    });
            }
        },
        //删除
        delLine(v) {
            this.centerDialogVisible = true;
            this.messTit = "即将删除此条数据, 是否删除?";
            this.delid = v.id;
        },
        //文件返回值
        uploadBack(v) {
           // this.fileInfo.fileList=v;
            this.attList = v;
            // console.log(v);
        },
        //功能栏
        iconCli(v) {
            if (v === 1) {
                this.getList(this.params, this.pageSize);
            }
            if (v === 2) {
                this.fullscreen = !this.fullscreen;
            }
        },
        getUser() {
            this.userInfo = JSON.parse(window.sessionStorage.userInfo);
            this.loginNoStr = this.userInfo.loginNoStr;

            this.personInfo = this.userInfo.groupName.split("/");
        }
    },
    mounted() {
        this.getList({}, 1);
        this.getUser();
    },
    created() {}
};
</script>
<style scoped lang="scss">
.onetab {
    margin-bottom: 20px;
    padding: 0 20px;
}

.titbox {
    div {
        float: right;

        i {
            font-size: 22px;
            margin-left: 20px;
            cursor: pointer;
        }
    }
}

.tabbox {
    margin-top: 15px;
}

.pageBox {
    text-align: right;
    margin-top: 10px;
}

.info-line {
    width: 100%;
    display: block;
    padding-left: 20px;

    div {
        width: 50%;
        display: inline-block;
    }

    span {
        width: 100px;
        display: inline-block;
        text-align: left;

        i {
            color: red;
            display: inline-block;
            padding-right: 5px;
        }
    }

    .el-select,
    .el-input {
        width: calc(100% - 120px);
    }
}
.info-line2 {
    width: 100%;
    padding-left: 40px;

    .upload-box {
        width: calc(100% - 80px);
        display: inline-block;
    }
    span {
        width: 60px;
        display: inline-block;
        text-align: left;
        vertical-align: top;

        i {
            color: red;
            display: inline-block;
            padding-right: 5px;
        }
    }
    .remark-box::v-deep {
        width: calc(100% - 80px);
        display: inline-block;
        div {
            padding-bottom: 10px;
        }
        .el-textarea__inner {
            // resize: none !important;
            height: 10vh;
        }
        .el-textarea .el-input__count {
            right: 0px;
            bottom: -20px;
            background: rgba(0, 0, 0, 0);
        }
    }
}
.online {
    width: 100%;

    .el-select {
        width: calc(100% - 100px);
    }

    span {
        vertical-align: top;
    }

    .el-textarea {
        width: calc(100% - 100px);
    }
}
.adv-type {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    // border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    div {
        width: 33%;
        text-align: center;
        height: 80px;
        overflow: hidden;
        min-width: 100px;
        cursor: pointer;
        padding-top: 10px;
        margin: 10px 0;
    }
    div:hover {
        background: #cfe8fc;
        border-radius: 5px;
    }
    span {
        width: 100%;
        display: inline-block;
        height: 40px;
        // line-height: 40px;
        i {
            color: #0074d9;
            font-size: 36px;
        }
    }
}
.container::v-deep .el-upload-dragger {
    width: auto !important;
    height: 120px !important;
}
.container::v-deep .el-upload {
    padding-left: 20px;
    padding-right: 0;
}
.boximgc {
    display: flex;
    flex-wrap: wrap;
    width: 100% !important;
    margin-top: 20px;

    div {
        display: inline-block;
        width: 18% !important;
        margin-right: 2%;
        margin-bottom: 20px;
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 3px;
        background: #fff;
        position: relative;
        height: 100px;

        img {
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            // height: 100%;
        }
    }
}
.search {
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    .search-item {
        margin-right: 20px;
        label {
            margin-right: 20px;
        }
    }
}
</style>