HY.yield.client/src/views/cultivateSeed/gradeAssess.vue

<template>
    <div class="GradeAssess">
        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">等级评定</h2>
        <header id="header">
            <el-row type="flex" :gutter="20">
                <el-col :span="4">
                    <el-input v-model="search" placeholder="请输入"></el-input>
                </el-col>
                <el-col :span="14">
                    <el-button type="primary" @click="getGradeAssessList">查找</el-button>
                </el-col>
                <el-col :span="4">
                    <el-button-group>
                        <el-button :type="gender==0?'primary':''" @click="shiftGender(0)">种母羊</el-button>
                        <el-button :type="gender==1?'primary':''" @click="shiftGender(1)">种公羊</el-button>
                    </el-button-group>
                </el-col>
            </el-row>
        </header>
        <section>
            <article class="table">
                <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
                    <el-table-column prop="id" label="羊只编号"></el-table-column>
                    <el-table-column prop="gender" label="性别">
                        <template v-slot="scope">
                            <span v-if="scope.row['gender'] == 0">母</span>
                            <span v-if="scope.row['gender'] == 1">公</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="patternArea" label="花纹面积"></el-table-column>
                    <el-table-column prop="hairLength" label="毛长"></el-table-column>
                    <el-table-column prop="hairWidth" label="毛宽"></el-table-column>
                    <el-table-column label="明显程度">
                        <template v-slot="scope">
                            <span v-if="scope.row['ifObviously'] == 0">不明显</span>
                            <span v-if="scope.row['ifObviously'] == 1">明显</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="等级评级">
                        <template v-slot="scope">
                            <div v-for="item in $store.state['seedSheedLevel']" :key="item.value">
                                <el-tag v-if="item.value == scope.row['level']">{{ item.label }}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template v-slot="scope">
                            <el-button
                                v-if="gender==0"
                                @click="goVirtualMating(scope.row)"
                                type="text"
                                size="small"
                            >虚拟配种</el-button>
                            <el-button @click="goClan(scope.row)" type="text" size="small">查看系谱</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-row type="flex" justify="end">
                    <el-col :span="8" class="pagination">
                        <el-pagination
                            @current-change="pageChange"
                            background
                            layout="prev, pager, next"
                            :page-count="Number(totalPages)"
                        ></el-pagination>
                    </el-col>
                </el-row>
            </article>
        </section>
    </div>
</template>

<script>
import { reqGradeAssessList } from "@/api/cultivateSeed.js";

const pageSize = 10;
const rules = {};

export default {
    name: "GradeAssess",
    data() {
        let _this = this;
        return {
            search: "",
            gender: 0,
            pageNum: 1,
            tableData: [],
            totalPages: 0,
            formData: {
                saleNo: "20200814001",
                saleTime: this.$moment().format("YYYY-MM-DD HH:mm:ss"),
                saleBatch: "12380",
                number: 4,
                weight: 204.8,
                price: 65,
                opeUser: null,
                buyer: "乔一飞",
                sum: 0.0,
                remark: "备注"
            },
            rules
        };
    },
    created() {
        // 等级评定列表
        this.getGradeAssessList();
    },
    watch: {
        "formData.weight"(v, ov) {
            this.formData.sum = (v * this.formData.price).toFixed(2);
        },
        "formData.price"(v, ov) {
            this.formData.sum = (this.formData.weight * v).toFixed(2);
        }
    },
    methods: {
        // 等级评定列表
        getGradeAssessList() {
            reqGradeAssessList({
                searchStr: this.search,
                pageSize,
                gender: this.gender,
                pageNum: this.pageNum
            })
                .then(res => {
                    this.tableData = res.content;
                    this.totalPages = res.totalPages;
                })
                .catch(err => {
                    console.log(err);
                });
        },
        shiftGender(gender) {
            this.gender = gender;
            // 等级评定列表
            this.getGradeAssessList();
        },
        goVirtualMating(row) {
            this.$router.push({
                path: "virtualMating",
                query: row
            });
        },
        goClan(row) {
            this.$router.push({
                path: "clan",
                query: row
            });
        },
        pageChange(p) {
            this.pageNum = p;
            // 等级评定列表
            this.getGradeAssessList();
        }
    }
};
</script>

<style lang="scss" scoped>
#header {
    margin-bottom: 15px;
}
.table {
    .pagination {
        margin-top: 20px;
    }
}
</style>