fj-dc-ui/.svn/pristine/d3/d3de4c02d250f169a9ea1dd4d280514ee2396121.svn-base

<!--  -->
<template>
    <div>
        <el-row>
            <el-col :span="leftWidth" style="padding: 0;border-right: 1px solid #dcdfe6;"
                :style="{'height': colHeight + 'px'}">
                <el-container>
                    <el-header style="height: 3vh;padding: 0 10px;line-height: 3vh;border-bottom:1px solid #dcdfe6;">
                        <strong>稽察任务</strong>
                    </el-header>
                    <el-main style="padding:10px 0;">
                        <el-row style="padding: 0 10px;">
                            <el-input clearable placeholder="点击下列选项或输入关键字搜索" v-model="filterText">
                            </el-input>
                        </el-row>
                        <el-row style="padding: 10px;">
                            <el-form :inline="true" size="mini" class="demo-form-inline">
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="年度">
                                            <el-select v-model="year" clearable style="width:100px;">
                                                <el-option :lable="item.year" :value="item.year" :key="item.id"
                                                    v-for="item in yearList"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="批次">
                                            <el-select v-model="batch" clearable style="width:100px;">
                                                <el-option :lable="item.batch" :value="item.batch" :key="item.id"
                                                    v-for="item in pcList"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-button type="primary" size="mini" @click="treeSearch">查询</el-button>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-row>
                        <el-row style="overflow-y:auto;padding: 0 10px;" :style="{'height': colHeight - 170 + 'px'}">
                            <el-tree :highlight-current="true" class="filter_tree" :data="treeDataLists"
                                :props="defaultProps" :default-expanded-keys="defaultExpanded"
                                :filter-node-method="filterNode" node-key="id" @node-click='treeNodeClickHandler'
                                ref="tree2">
                                <span class="custom-tree-node" slot-scope="{ node }">
                                    <el-tooltip v-if="node.isLeaf" class="item" effect="dark" :content="node.label"
                                        placement="top-start">
                                        <span>{{ node.label }}</span>
                                    </el-tooltip>
                                    <span v-else>{{ node.label }}</span>
                                </span>
                            </el-tree>
                        </el-row>
                    </el-main>
                </el-container>
            </el-col>
            <el-col :span="rightWidth" style="border-right: 1px solid #dcdfe6;position:relative;padding: 10px;"  :style="{'height': colHeight + 'px'}">
              <div style="text-align: right;padding-bottom: 10px;">
                  <el-button type="primary" @click="searchBtn">查询</el-button>
              </div>
              <span style="float:left;color:red;font-size: 12px;">*（双击单元格编辑，红色背景单元格代表更改值未保存）</span>
              <el-table
                :data="tableData"
                border
                stripe
                :row-class-name="tableRowClassName"
                @row-dblclick="rowDbClick"
                v-loading='loading'
                :height="tableHeight">
                <el-table-column align="center" label="序号" prop="index">
                  <template slot-scope="scope">{{scope.$index + 1}}</template>
                </el-table-column>
                <el-table-column align="center" label="稽察专家">
                  <el-table-column align="center" label="专业" :formatter="formatExpertProf" prop="expertProf" show-overflow-tooltip min-width="120"></el-table-column>
                  <el-table-column align="center" label="姓名" prop="expertName" show-overflow-tooltip min-width="120"></el-table-column>
                </el-table-column>
                <el-table-column align="center" label="测评指标">
                  <el-table-column align="center" label="工作质量" prop="" show-overflow-tooltip min-width="120">
                    <el-table-column
                       align="center"
                       label="业务水平:熟悉稽察工作流程和要求，专业经验丰富;熟练运用政策法规、规程规范，对本专业的突出可题应查尽查，熟练使用水利稽察工作信息系统和常见问题清单(30分)"
                       prop="businessLevel"
                       show-overflow-tooltip
                       min-width="300">
                      <template slot-scope="scope">
                        <div @dblclick.stop v-if="scope.row.isEdit">
                         <el-input-number v-model="scope.row.businessLevel" :min="0" :max="30" placeholder="请输入分数" style="width: 100%;"></el-input-number>
                        </div>
                        <span v-else>{{scope.row.businessLevel}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="现场成果质量: 定性准确，事实清楚，法规得当，证据确凿，责任主体明确，问题描述条理清晰、逻辑严密、格式规范(50分)"
                      prop="qualityResults"
                      show-overflow-tooltip
                      min-width="300">
                      <template slot-scope="scope">
                          <div @dblclick.stop v-if="scope.row.isEdit">
                            <el-input-number v-if="scope.row.isEdit" v-model="scope.row.qualityResults" :min="0" :max="50" placeholder="请输入分数" style="width: 100%;"></el-input-number>
                          </div>
                          <span v-else>{{scope.row.qualityResults}}</span>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="工作作风" prop="" show-overflow-tooltip min-width="120">
                    <el-table-column
                      align="center"
                      label="坚持原则、求真务实，敢于管理、敢于担当，积极主动团结协作;言行举止得体，维护稽察组形象;工作方法得当 (20分)"
                      prop="workStyle"
                      show-overflow-tooltip
                      min-width="300">
                      <template slot-scope="scope">
                          <div @dblclick.stop v-if="scope.row.isEdit">
                            <el-input-number   v-model="scope.row.workStyle" :min="0" :max="20" placeholder="请输入分数" style="width: 100%;"></el-input-number>
                          </div>
                          <span v-else>{{scope.row.workStyle}}</span>
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="一票否决项" prop="" show-overflow-tooltip min-width="120">
                    <el-table-column
                      align="center"
                      label="按注2填写(是/否)"
                      prop="oneVeto"
                      show-overflow-tooltip
                      width="120">
                      <template slot-scope="scope">
                          <div @dblclick.stop v-if="scope.row.isEdit">
                            <el-select v-model="scope.row.oneVeto" placeholder="请选择" style="width: 100%;">
                               <el-option value="1" label="是"></el-option>
                               <el-option value="0" label="否"></el-option>
                            </el-select>
                          </div>
                          <span v-else>{{scope.row.oneVeto=='1'?'是':scope.row.oneVeto=='0'?'否':''}}</span>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>

                <el-table-column align="center" label="测评结果">
                  <el-table-column align="center" label="总得分" prop="" show-overflow-tooltip min-width="120">
                    <el-table-column
                      align="center"
                      label="优(95分-100分)良(85分-94分)合格 (75分-84分)不合格 (75分以下)"
                      prop="g"
                      show-overflow-tooltip
                      width="150">
                      <template slot-scope="scope">
                         {{isNumber(scope.row.businessLevel)+isNumber(scope.row.qualityResults)+isNumber(scope.row.workStyle)}}
                      </template>
                    </el-table-column>
                  </el-table-column>
                  <el-table-column align="center" label="等级" prop="h" show-overflow-tooltip width="120">
                     <template slot-scope="scope">
                       <span v-if="(isNumber(scope.row.businessLevel)+isNumber(scope.row.qualityResults)+isNumber(scope.row.workStyle))>=95">优</span>
                       <span v-else-if="(isNumber(scope.row.businessLevel)+isNumber(scope.row.qualityResults)+isNumber(scope.row.workStyle))>=85 && Math.floor(isNumber(scope.row.businessLevel)+isNumber(scope.row.qualityResults)+isNumber(scope.row.workStyle))<=94">良</span>
                       <span v-else-if="(isNumber(scope.row.businessLevel)+isNumber(scope.row.qualityResults)+isNumber(scope.row.workStyle))>=75 && Math.floor(isNumber(scope.row.businessLevel)+isNumber(scope.row.qualityResults)+isNumber(scope.row.workStyle))<=84">合格</span>
                       <span v-else-if="(isNumber(scope.row.businessLevel)+isNumber(scope.row.qualityResults)+isNumber(scope.row.workStyle))<75">不合格</span>
                       <span v-else></span>
                     </template>
                  </el-table-column>
                  <el-table-column align="center" label="备注说明" prop="i" show-overflow-tooltip min-width="120">
                    <el-table-column
                      align="center"
                      label="等级不合格或存在票否决项，在本栏说明"
                      prop="note"
                      show-overflow-tooltip
                      min-width="300">
                      <template slot-scope="scope">
                          <div @dblclick.stop v-if="scope.row.isEdit">
                            <el-input  v-model="scope.row.note" placeholder="请输入说明"></el-input>
                          </div>
                          <span v-else>{{scope.row.note}}</span>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="操作"
                  fixed="right"
                  width="220">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" :disabled="!scope.row.isEdit" @click.stop="cancelRow(scope.row)">取消</el-button>
                    <el-button type="primary" size="mini" :disabled="!scope.row.isEdit" @click.stop="submitRow(scope.row)">保存</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="padding: 10px;letter-spacing: 1px;text-align: left;">
                注:1一票否决项包括:①反中央八项规定及其实施细则情神、都建办技术处十不准 等有关要求的;②不服从工作安排的; ③泄露国家和被查单位机密、损害国家和被查单位
                益，造成严重后果的;④在稽察过程中存在过错被投诉，经调查属实且造成严重后果的;⑤工作出现严重、失误的;⑥存在违法违纪行为的。存在一票否决项的填写对应序号，不存在一
                票否决项问题的填写“无”。2测评人应本着实事求是、客观公正的原则进行次评。对填写明是不符合实际情况的测评人，经核实，在批次测评积分中和除1分-5分。3 察工作结束前，请
                测评人将该表填写完整后点击左上角保存。
              </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import request from '../../../utils/gw_ajax_request'
    import { hostUrl } from '@util/global_variable.js'
    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {

        },
        data() {
            //这里存放数据
            return {
                tableData:[],
                loading:false,
                stateName: '', //状态名称
                leftWidth: 5,
                rightWidth: 19,
                isOpen: true,
                tbsm: true,
                jbxxAndWtqd: false,
                reportTable: false,
                defaultExpanded: [],//树默认展开节点数组
                curComponent: "InstructionManual",
                professionName: '前期与设计',
                professionType: '',//专业类型
                professionChildrenTableName: {},
                rightTableName: '填报说明',
                currentNodeId: '',//点击树的节点登记表ID
                inspGroupId: '',//点击树的节点组ID
                pertype: '',//稽察填报人员类型，用于控制表格上方菜单控制
                objId: '',//点击树节点的objId
                tableSrc: '',//报表的链接
                menuDisNum: 'all',//用于控制表格上方菜单项的显示隐藏的数组下标
                projectName: '',//点击树的工程名称
                colHeight: window.innerHeight - 90,
                tableHeight: window.innerHeight - 240,
                filterText: '',
                year: "",
                batch: "",
                yearList: [],
                pcList: [],
                treeDataLists: [],
                defaultProps: {
                    children: 'children',
                    label: 'pnm'
                },
                showSubmitBtn: true,
                backStatus: false,
                exportWordDialog: false,
                reallMenuLists: [],//菜单实际用的数组
                isClicked: false,
                currentRow:undefined,
                isSubmit:false,
            };
        },
        //监听属性 类似于data概念
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            hasPriv() {
                return this.ownPriv('manage')
            },
            roleTypeData(){
                return this.$store.state.jcState.roleTypeData;
            }
        },
        //监控data中的数据变化
        watch: {
            filterText(val) {
                this.$refs.tree2.filter(val);
            }
        },
        //方法集合
        methods: {
            formatExpertProf(row,column){
               var name = [];
               var str = row[column.property];
               if(str){
                  this.roleTypeData.forEach((item)=>{
                      if(str.indexOf(item.value)>-1){
                          name.push(item.label);
                      }
                  })
               }
               return name.join(",");
            },
            searchBtn(){
                this.initTable();
            },
            sumScore(obj){
                var score = this.isNumber(obj.businessLevel)+this.isNumber(obj.qualityResults)+this.isNumber(obj.workStyle);
                obj.score = score;
                if(score>=95){
                    obj.evalLevel = "优";
                }else if(score>=85 && Math.floor(score)<=94){
                    obj.evalLevel = "良";
                }else if(score>=75 && Math.floor(score)<=84){
                    obj.evalLevel = "合格";
                }else{
                    obj.evalLevel = "不合格";
                }
            },
            isNumber(v){
                if(v){
                  if(!isNaN(parseFloat(v))){
                     return parseFloat(v);
                  }else{
                      return 0;
                  }
                }else{
                    return 0;
                }
            },
            styleBack({ row, column, rowIndex, columnIndex }) {
                if(row.isEdit==true && this.currentRow!=undefined && row[column.property] && (column.property=="businessLevel" || column.property=="qualityResults" || column.property=="workStyle")){
                   if(row[column.property]!=this.currentRow[column.property]){
                       return { background: "#fd2528" };
                   }
                }
            },
            initTable(){
                var _self = this;
                var obj = {
                    groupId:this.inspGroupId,
                    projId:this.currentNodeId
                }
                request.post(`/tac/evalation/expert/todo/eval/list`, obj).then(res => {
                    if (res.success) {
                        if(res.data && res.data.length>0){
                            res.data.forEach((item)=>{
                                item.isEdit = false;
                                item.businessLevel = (item.businessLevel || item.businessLevel===0)?item.businessLevel:30,
                                item.qualityResults = (item.qualityResults || item.qualityResults===0)?item.qualityResults:50,
                                item.workStyle = (item.workStyle || item.workStyle===0)?item.workStyle:20
                            })
                        }
                        _self.tableData = res.data;
                        _self.currentRow = undefined;
                    }
                })
            },
            cancelRow(row){
                for (const key in this.currentRow) {
                   if(key!="index" && key!="isEdit"){
                       row[key] = this.currentRow[key];
                   }
                }
                row.isEdit = false;
            },
            submitRow(row){
               var str = JSON.stringify(row);
               var obj = JSON.parse(str);
               obj.projId = this.currentNodeId;
               this.sumScore(obj);
               request.post(`/tac/evalation/expert/`, obj).then(res => {
                    if (res.success) {
                       this.initTable();
                    }else{
                        this.$message.warning(res.message);
                    }
               })
            },
            tableRowClassName ({row, rowIndex}) {
               row.index = rowIndex;
               return "currentEdit"
            },
            rowDbClick(row, column, event){
                row.isEdit = true;
                if(this.currentRow!=undefined){
                    this.tableData.forEach((item,index)=>{
                        if(this.currentRow.index==index){
                            for (const key in this.currentRow) {
                                if(key!="index" && key!="isEdit"){
                                    item[key] = this.currentRow[key];
                                }
                            }
                        }
                    })

                }
                var obj = JSON.stringify(row);
                this.currentRow = JSON.parse(obj);
                this.tableData.forEach((item,index)=>{
                    if(row.index!=index){
                        item.isEdit = false;
                    }
                })


            },
            async getYearPc() {
                await request.post(`/tac/insp/year/list`, {}).then(res => {
                    if (res.success) {
                        this.$nextTick(() => {
                            this.yearList = res.data;
                        })
                    }
                })
                request.post(`/tac/insp/batch/list`, {}).then(res => {
                    if (res.success) {
                        this.pcList = res.data;
                    }
                })
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.pnm.indexOf(value) !== -1;
            },
            //获取左侧树数据
            getTreeData: function () {
                let _self = this;
                request.post(`/tac/insp/year/batch/obj/getObjTreeListV2`, {
                    "persId": _self.persId,
                    "year": _self.year,
                    "batch": _self.batch,
                    "isEval": "1",
                }).then(res => {
                    _self.treeDataLists = res.data.children;
                })

            },
            //左侧树搜索
            treeSearch() {
                this.getTreeData();
            },
            //树节点点击事件
            treeNodeClickHandler: function (data, node, tree) {
                if (node.childNodes.length == 0) {
                    this.currentNodeId = data.objId;
                    this.inspGroupId = node.parent.data.pid;
                    this.initTable();
                } else {
                    return;
                }
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.getTreeData();
            this.getYearPc();
        },
        beforeCreate() { }, //生命周期 - 创建之前
        beforeMount() { }, //生命周期 - 挂载之前
        beforeUpdate() { }, //生命周期 - 更新之前
        updated() { }, //生命周期 - 更新之后
        beforeDestroy() { }, //生命周期 - 销毁之前
        destroyed() { }, //生命周期 - 销毁完成
        activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang="scss" scoped>
    .currentEdit{
       background: red;
    }
    .filter_tree {
        .el-tree-node__label {
            color: #666;
            font-size: large;
        }
    }

    .filter_tree.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background-color: #c7e9fe;
    }

    .assistant_btn {
        position: absolute;
        bottom: -10px;
        right: 20px;
        z-index: 999;
    }

    .open_board {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 24px;
        height: 30px;
        line-height: 30px;
        border: solid 1px #ddd;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        text-align: center;
        background-color: #bbebff;
        cursor: pointer;
    }
</style>