tire-platform-ui/src/views/maintenanceQ/index.vue

<template>
    <div>
        <basic-container v-show="show" class="page-crad">
            <avue-crud ref="crud" :option="option" :data="dataList" :page.sync="page" :search.sync="search"
                       @search-change="searchChange" @current-change="currentChange" @size-change="sizeChange"
                       @refresh-change="refreshChange" @on-load="onLoad" :table-loading="loading" @saveColumn="saveColumn"
                       @resetColumn="resetColumn" :cell-style="cellStyle" @search-criteria-switch="searchCriteriaSwitch">
                <template slot="menuLeft">
                    <el-button type="primary" size="mini" @click.stop="newAdd()">新建维修
                    </el-button>
                    <el-button type="primary" size="mini" @click.stop="openExport()">导出
                    </el-button>
                </template>
                <template slot="corpIdSearch">
                    <crop-select v-model="search.corpId" corpType="GYS"></crop-select>
                </template>
                <template slot-scope="{ row, index }" slot="corpId">
          <span style="color: #409EFF;cursor: pointer" @click.stop="editOpen(row, 1)">{{ row.corpsName }}
          </span>
                </template>
                <template slot-scope="{ row, index }" slot="sysNo">
          <span style="color: #409EFF;cursor: pointer" @click.stop="editOpen(row, 1)">{{ row.sysNo }}
          </span>
                </template>
                <template slot-scope="{ row, index }" slot="menu">
                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                        <i class="tradingIcon icon-edit" @click.stop="editOpen(row, 2)"/>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <i class="tradingIcon icon-del" @click.stop="rowDel(row, index)"/>
                    </el-tooltip>
                </template>
            </avue-crud>
        </basic-container>
        <details-page v-if="!show" @goBack="goBack()" :detailData="detailData" />
    </div>
</template>

<script>
import detailsPage from "./detailsPage";
import { option } from "./js/optionList";
import { maintenanceList, maintenanceRemove} from "@/api/basicData/maintenanceQ";
import {
    allCropList,
} from "@/api/basicData/customerInformation";
import {getCustomerCode} from "@/enums/management-type";
import {getToken} from "@/util/auth";
export default {
    name: "index",
    data() {
        return {
            src: '',
            show: true,
            loading: false,
            search: {},
            detailData: {},
            dataList: [],
            selectionList: [],
            page: {
                pageSize: 20,
                currentPage: 1,
                total: 0,
                pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500]
            },
            option: {},
        };
    },
    components: {
        detailsPage
    },
    async created() {
        this.option = option
        this.option.height = window.innerHeight - 210;

        // 路由跳转
        if (this.$route.query.id) {
          this.detailData = {
            id: this.$route.query.id,
            status: 1
          };
          this.show = false;
        }

        this.allCropListfun()
    },
    activated() {
        this.$refs.crud.refreshTable();
        if (!this.$store.getters.pjcgStatus&&!this.show) {
            this.show = true;
        }
        if (this.$route.query.orderId) {
            setTimeout(() => {
                this.editOpen({ id: this.$route.query.orderId }, 1);
            }, 100);
        }
    },
    methods: {
        // 导出设备
        openExport() {
            let params = JSON.parse(JSON.stringify(this.search))
            const routeData = this.$router.resolve({
                path: '/api/blade-sales-part/maintenance/export-out-info',      //跳转目标窗口的地址
                query: {
                    ...params    //括号内是要传递给新窗口的参数
                }
            })
            window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
        },
        // 客户查询
        allCropListfun(){
            let userObj = JSON.parse(localStorage.getItem("saber-userInfo")).content;
            allCropList({
                corpType: "KH",
                adminProfiles: userObj.role_name != "admin" ? userObj.user_id : null,
            }).then(res=>{
                this.findObject(this.option.column, "corpName").dicData = res.data.data
            })
        },
        searchCriteriaSwitch(type) {
            if (type) {
                this.option.height = this.option.height - 138;
            } else {
                this.option.height = this.option.height + 138;
            }
            this.$refs.crud.getTableHeight();
        },
        cellStyle() {
            return "padding:0;height:40px;";
        },
        //点击搜索按钮触发
        searchChange(params, done) {
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        refreshChange() {
            this.onLoad(this.page, this.search);
        },
        newAdd() {
            this.show = false;
            // this.$store.commit("IN_PJCG_STATUS");
        },
        // 列表数据
        onLoad(page, params = {}) {
            let data = this.deepClone(Object.assign(params, this.search));
            this.loading = true;
            maintenanceList(
                page.currentPage,
                page.pageSize,
                data
            ).then(res => {
                this.dataList = res.data.data.records ? res.data.data.records : [];
                this.page.total = res.data.data.total;
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
            }).finally(() => {
                this.loading = false;
            });
        },
        editOpen(row, status) {
            this.detailData = {
                id: row.id,
                status: status
            };
            this.show = false;
            // this.$store.commit("IN_PJCG_STATUS");
        },
        currentChange(val) {
            this.page.currentPage = val;
        },
        sizeChange(val) {
            this.page.currentPage = 1;
            this.page.pageSize = val;
        },
        rowDel(row, index, done) {
            this.$confirm("确定删除数据?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                maintenanceRemove({ids:row.id}).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });
                        this.onLoad(this.page, this.search);
                    }
                });
            });
        },
        async saveColumn() {
            const inSave = await this.saveColumnData(
                this.getColumnName(213),
                this.option
            );
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
                this.$message.success("保存成功");
                //关闭窗口
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
        async resetColumn() {
            this.option = option;
            const inSave = option
            if (inSave) {
                this.$nextTick(() => {
                    this.$refs.crud.doLayout();
                });
                this.getAllWorkDicts()
                this.$message.success("重置成功");
                this.$refs.crud.$refs.dialogColumn.columnBox = false;
            }
        },
        //返回列表
        goBack() {
            this.detailData = this.$options.data().detailData;
            this.show = true;
            this.onLoad(this.page, this.search);
            // this.$store.commit("OUT_PJCG_STATUS");
        },
    }
}
</script>

<style  lang="scss"  scoped>
.page-crad ::v-deep .basic-container__card {
    height: 94.2vh;
}

.stat-td {
    text-align: center;
    position: relative;
}

.stat-img {
    width: 95%;
    height: 100px;
}

.stat-tip {
    position: absolute;
    left: 15px;
    top: 5px;

    .money {
        color: #fff;
        font-size: 28px;
        text-align: left;
        font-weight: 600;
    }

    .title {
        color: #fff;
        font-size: 14px;
        text-align: left;
        margin-top: 5px;
        margin-bottom: 0px;
    }
}
</style>