elizebeth/src/xt_pages/data/components/inspection.vue

<template>
    <div class="page_inspection">
        <div style="display:flex;justify-content: space-between;width:100%;margin-bottom:20px;">
            <div class="cell clearfix" style="margin-bottom:0;">
                <el-input style="width: 180px;margin-right:10px;" @keyup.enter.native='searchAction' v-model.trim="search_input" class="filter-item"/>
                <el-button style="margin-right:10px;" class="filter-item" type="primary" icon="el-icon-search" @click="searchAction">搜索</el-button>
                <label class="title"><span class="name">是否启用</span> : </label>
                <el-select v-model="value" style="width:140px;margin-right:10px;" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <el-button type="primary" @click="openForm(0)">新增</el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)', color: '#606266'}">
            <el-table-column prop="date" label="序号" width="80" align="center">
                <template slot-scope="scope">
                    {{scope.$index + 1}}
                </template>
            </el-table-column>
            <el-table-column prop="date" label="名称" align="center">
                <template slot-scope="scope">
                    {{scope.row.project_team}}
                </template>
            </el-table-column>
            <el-table-column prop="date" label="拼音助记符" width="140" align="center">
                <template slot-scope="scope">
                    {{scope.row.pinyin}}
                </template>
            </el-table-column>
            <el-table-column prop="date" label="五笔助记符" width="140" align="center">
                <template slot-scope="scope">
                   {{scope.row.wubi}}
                </template>
            </el-table-column>
            <el-table-column label="价格" width="60" align="center">
                <template slot-scope="scope">
                   {{scope.row.price}}
                </template>
            </el-table-column>
            <el-table-column prop="date" label="备注" align="center">
                <template slot-scope="scope">
                   {{scope.row.remark}}
                </template>
            </el-table-column>
            <el-table-column prop="date" label="操作" width="300" align="center">
                <template slot-scope="scope">
                    <el-button @click="editProjectTeam(scope.row.id)" type="primary" size="small">编辑</el-button>
                    <el-button type="danger" size="small" @click="DeleteProjectTeam(scope.row.id,scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 50, 100]"
            :page-size="10"
            background
            align="right"
            style="margin-top:20px;"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
         >
        </el-pagination>

        <add-inspection ref="addInspection"></add-inspection>
        <edit-inspection ref="editInspection"></edit-inspection>
    </div>
</template>

<script>
import addInspection from './addInspection'
import editInspection from './editInspection'
import { getProjectTeamList,DeleteProjectTeam } from "@/api/project/project"
export default {
    components:{
        addInspection,
        editInspection
    },
    data(){
        return{
            search_input:'',
            options: [{
            value: '1',
            label: '是'
            }, {
            value: '2',
            label: '否'
            },],
            value: '',
            tableData: [],
            limit:20,
            page:1,
            total:0
            
        }
    },
    methods:{
      handleSizeChange(val) {
        this.limit = val
        this.getlist()
      },
      handleCurrentChange(val) {
        this.page = val
        this.getlist()
      },
        searchAction(){},
        clickSelfPayment(){
            this.$refs.selfPayment.show();
        },
        clickMainTain(){
            // this.$refs.maintain.show();
        },
        openForm(id){
            this.$refs.addInspection.show(id);
        },
        editProjectTeam(id){
           this.$refs.editInspection.show(id)
        },
        getlist(){
            const params = {
               limit:this.limit,
               page:this.page,
            }
          getProjectTeamList(params).then(response=>{
             if(response.data.state == 1){
               var projectTeamList =  response.data.data.projectTeamList
               console.log("projectteamlist",projectTeamList)
               this.tableData = projectTeamList
               var total  =  response.data.data.total
               this.total = total
             }
          })
        },
        DeleteProjectTeam(id,index){
          this.$confirm("确认删除此项目组套吗?", "删除", {
            confirmButtonText: "确 定",
            cancelButtonText: "取 消",
            type: "warning"
           }).then(() => {
            DeleteProjectTeam(id,index).then(response => {
               if (response.data.state == 1) {
                 var msg = response.data.data.msg
                 this.$message.success("删除成功")
                this.tableData.splice(index, 1);
                }
            });
            })
            .catch(() => {});   
        }
    },
    created(){
       this.getlist()  
    }
}
</script>