simulation-front/src/views/workManagement/manualRunProjectList.vue

<template>
    <div>
        <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">项目ID</span>
                <el-input
                    v-model="searchParams.id"
                    size="small"
                    clearable
                    placeholder="请输入"
                    maxlength="60"
                >
                </el-input>
            </template>
            <template slot="searchItem2">
                <span class="label">项目名称</span>
                <el-input
                    v-model="searchParams.clientOrgName"
                    size="small"
                    clearable
                    placeholder="请输入"
                    maxlength="60"
                >
                </el-input>
            </template>
            <template slot="searchItem3">
                <span class="label">进度</span>
                <el-select v-model="searchParams.status">
                    <el-option
                        v-for="item in list"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </template>
            <template slot="searchItem4">
                <span class="label">测评等级</span>
                <el-select v-model="searchParams.status">
                    <el-option
                        v-for="item in list"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </template>
            <template slot="searchItem5">
                <span class="label">创建时间</span>
                <el-date-picker
                    v-model="searchParams.clientOrgName1"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </template>
            <template slot="searchItem6">
                <span class="label">完成时间</span>
                <el-date-picker
                    v-model="searchParams.clientOrgName1"
                    type="date"
                    placeholder="选择日期"
                >
                </el-date-picker>
            </template>

            <template slot="searchBtn1">
                <el-button type="primary">查询</el-button>
            </template>
            <template slot="searchBtn2">
                <el-button type="primary">重置</el-button>
            </template>
        </search-layout>

        <div class="btnsPanel">
            <el-button type="primary" plain icon="el-icon-delete"
                >批量删除</el-button
            >
            <el-button
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="addOne"
                >创建</el-button
            >
        </div>

        <tableList
            ref="table"
            style="margin: 0 30px"
            :columns="columns"
            :getDataWay="getDataWay"
            :pagination="pagination"
            selection
            index
        >
            <!-- <el-table-column label="停/启用" slot="asd" align="center">
                <template v-slot="scope">
                    <el-switch
                        v-model="scope.row.asd"
                        active-color="#3397FF"
                        inactive-color="#b2b2b2"
                    >
                    </el-switch>
                </template>
            </el-table-column> -->
            <el-table-column label="操作" slot="cgInfos" align="center">
                <template v-slot="scope">
                    <i
                        @click="addMarkDia(scope.row)"
                        class="el-icon-video-pause elIcon"
                        title="停用"
                    ></i>
                    <i
                        @click="addMarkDia(scope.row)"
                        class="el-icon-delete elIcon"
                        title="删除"
                    ></i>
                    <i
                        @click="viewRow(scope.row)"
                        class="el-icon-view elIcon"
                        title="查看"
                    ></i>
                    <i
                        @click="addMarkDia(scope.row)"
                        class="el-icon-video-play elIcon"
                        title="运行"
                    ></i>
                    <i
                        @click="addMarkDia(scope.row)"
                        class="el-icon-edit-outline elIcon"
                        title="编辑"
                    ></i>
                    <i
                        @click="downRow(scope.row)"
                        class="el-icon-download elIcon"
                        title="下载"
                    ></i>
                </template>
            </el-table-column>
        </tableList>

        <el-dialog
            title="编辑"
            :visible.sync="dialogVisible"
            width="690px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <div class="checkboxPanel">
                <el-checkbox-group v-model="downType">
                    <el-checkbox label="工作报告" class="labelA"></el-checkbox>
                    <el-checkbox label="任务文件包"></el-checkbox>
                </el-checkbox-group>
            </div>
            <span slot="footer">
                <el-button type="primary" @click="dialogVisible = false"
                    >确 定</el-button
                >
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import searchLayout from "@/components/grid/searchLayout";
import tableList from "@/components/grid/TableList";

export default {
    name: "manualRunProjectList", // 手动运行项目
    components: { searchLayout, tableList },
    data() {
        return {
            searchParams: {
                //搜索参数
                id: "", //ID
                clientOrgName: "", //车辆名称
                clientOrgName1: "", //配置名称
                clientOrgName2: "", //配置描述
            },
            list: [],
            columns: [
                {
                    label: "项目ID",
                    prop: "id",
                },
                {
                    label: "项目名称",
                    prop: "ktName",
                },
                {
                    label: "算法名称",
                    prop: "jbSource",
                },
                {
                    label: "创建时间",
                    prop: "jbSource",
                },
                {
                    label: "进度",
                    prop: "startDateStr",
                },
                {
                    label: "测评等级",
                    prop: "jbSource",
                },
                // {
                //     label: "停/启用",
                //     prop: "asd",
                //     template: true,
                // },
                {
                    label: "操作",
                    prop: "cgInfos",
                    template: true,
                },
            ],
            pagination: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWay: {
                //加载表格数据
                dataType: "data",
                type: "post",
                firstRequest: false,
                data: [
                    {
                        id: 1,
                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
                        asd: true,
                    },
                    { id: 2, asd: true },
                    { id: 3, asd: true },
                    { id: 4, asd: true },
                    { id: 5, asd: true },
                    { id: 6, asd: true },
                ],
                param: {},
            },
            downType: [],
            dialogVisible: false,
        };
    },
    methods: {
        addOne() {
            this.$router.push({ path: "/manualRunProjectDetail" });
        },
        viewRow() {
            this.$router.push({ path: "/projectInfo" });
        },
        addMarkDia() {},
        downRow(row) {
            this.dialogVisible = true;
        },
    },

    // mounted() {},
};
</script>

<style lang='less' scoped>
.btnsPanel {
    margin: 45px 40px 15px;
}

.checkboxPanel {
    text-align: center;

    .labelA {
        margin-right: 60px;
    }
}
</style>