vue-elemnt-gin/src/components/projectDialog/index.vue

<template>
    <div>
        <div>
            <el-button size="small" @click="showDialog()">选择考核项目</el-button>
        </div>
        
        <el-dialog title="提示" :visible.sync="dialogVisible" width="60%" :append-to-body="true">
            <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="projectSearchInfo">
        <el-form-item label="考核项目名称">
          <el-input
            placeholder="请输入名称"
            v-model="projectSearchInfo.title"
            clearable>
          </el-input>
        </el-form-item>
        <!-- <el-form-item label="考核项目状态">
          <el-select v-model="projectSearchInfo.state" clearable placeholder="请选择状态">
            <el-option :value=1 label="正常">正常</el-option>
            <el-option :value=2 label="禁止">禁止</el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="所属考核类别">
          <el-select v-model="projectSearchInfo.parentId" clearable placeholder="请选择状态">
             <el-option
              v-for="item in dutyclasslist"
              :key="item.outId"
              :label="item.title"
              :value="item.outId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          <!-- <el-button size="mini" icon="el-icon-refresh" @click="onReset">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="gva-table-box">
      <el-table :data="assessList">
        <!-- <el-table-column
          type="selection"
          width="55"
        /> -->
        <el-table-column align="left" label="所属考核类别" prop="parentTitle"/>
        <el-table-column align="left" label="考核项目名称" prop="title"/>
        <el-table-column align="left" label="考核项目说明" prop="content"/>
        <el-table-column align="left" fixed="right" label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" round  @click="checked(scope.row)">选中</el-button>
            
          </template>
        </el-table-column>
      </el-table>
      <div class="gva-pagination">
        <el-pagination
          :current-page="projectSearchInfo.page"
          :page-size="projectSearchInfo.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
           <!-- <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
           </span> -->
        </el-dialog>
        
    </div>
</template>

<script>
import {
  dutyclasslist
} from '@/api/duty/dimension'
import {
  assessList,
} from '@/api/duty/project'
    export default {
        data() {
            return {
                projectTitle:'',
                total:'',
                searchList:{
                    page:1,
                    pagesize:10000,
                },
                dutyclasslist:{},
                projectSearchInfo:{
                    page: 1,
                    pageSize: 10,
                    state:1,
                },
              dialogVisible: false,
              assessList:null,
            }
        },
        created () {
          this.getProjectList();  
          this.getDutyclasslist();
        },
        methods: {
            // 条件搜索前端看此方法
            onSubmit() {
                this.page = 1
                this.pageSize = 10
                
                this.getProjectList()
            },
            // pagesize改变
            handleSizeChange(val) {
                this.projectSearchInfo.pageSize=val
            },
            // 页码改变
            handleCurrentChange(val) {
                this.projectSearchInfo.page=val
            },
            // 获取考核类别列表
            async getDutyclasslist(){
                const res = await dutyclasslist(this.searchList)
                this.dutyclasslist=res.data.list;
            },
            // 点击按钮事件
            showDialog(){
                this.dialogVisible=true;
            },
            // 获取考核项目列表
            async getProjectList(){
                const res = await assessList(this.projectSearchInfo)
                this.assessList=res.data.list;
                this.projectSearchInfo.page=res.data.page;
                this.projectSearchInfo.pageSize=res.data.pageSize;
                this.total=res.data.total;
            },
            // 选中
            checked(row){
                this.projectTitle=row.title;
                this.$emit('checkedInfo',row)
                this.dialogVisible=false
            },
        }
    }
</script>

<style lang="scss" scoped>

</style>