fj-dc-ui/.svn/pristine/4a/4af3aa3905fa680970df2e0d50f2f7c0bebdb505.svn-base

<template>
<div>
    <!-- <el-dialog :title="'责任人填报'" :visible.sync="dialogFormVisible"> -->
    <el-container style="height:520px;">
        <el-header style="text-align: right; font-size: 12px;height:40px;">
            <el-button type="primary" @click="addHandler">添加走访人员</el-button>
        </el-header>
        <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="viewPreName" label="走访人姓名" min-width="100" align="center">
                </el-table-column>
                <el-table-column prop="knowResManager" label="是否知晓水库管护员" min-width="90" align="center">
                    <template slot-scope="scope">
                        <span style="font-weight:bolder;color:#67C23A" v-if="scope.row.knowResManager == 1" >是</span>
                        <span style="font-weight:bolder;color:#F56C6C" v-if="scope.row.knowResManager == 2" >否</span>
                    </template>
                </el-table-column>
                <el-table-column prop="managerComment" label="对管护责任人评价" min-width="90" align="center">
                    <template slot-scope="scope">

                        <span style="font-weight:bolder;color:#F56C6C" v-if="scope.row.managerComment == 3" >不满意</span>
                        <span style="font-weight:bolder;color:#E6A23C" v-if="scope.row.managerComment == 2" >一般</span>
                        <span style="font-weight:bolder;color:#67C23A" v-if="scope.row.managerComment == 1" >满意</span>
                    </template>
                </el-table-column>
                <el-table-column prop="inspTm" label="走访日期" min-width="100" align="center"></el-table-column>
                <el-table-column prop="note" label="备注" :show-overflow-tooltip="true" min-width="170"></el-table-column>
                <el-table-column align="center" show-overflow-tooltip label="操作" min-width="160" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="success" plain @click="manageItem(scope.row)">编辑</el-button>
                        <el-button type="danger" plain @click="deleteItem(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-main>

    </el-container>
    <!-- <span slot="footer" class="dialog-footer" style="justify-content: flex-end;display: flex;">
        <el-button type="primary" @click="makesure">保 存</el-button>
    </span> -->
    <el-dialog :title="'走访情况填报'" :visible.sync="dialogFormVisible" :modal="false">
        <el-container style="height:520px;">
            <!-- <el-aside width="200px" style="border:1px solid #d5d5ff;overflow-y:hidden;">
        <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">
          <i class="el-icon-share"></i>选择行政村
        </p>

         <provTreeList
          :rootCode="fengongxianCode"

          style="max-height:100%;"
          @provTreeSelectChange="provTreeSelectChangeHandler"
        ></provTreeList>

      </el-aside> -->
            <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">信息填报</p>
                <el-form :model="formObj" :rules="rules"  ref="formObj" label-width="160px" status-icon>
                    <p style="margin-top:10px;margin-bottom: 10px"><i class="el-icon-caret-right"></i><span style="width:120px;padding-left: 10px">走访人员基本信息</span><span class="hrs"></span></p>
                    <el-form-item label="走访人员名称" prop="viewPreName">
                        <!-- <el-input v-model="formObj.adNm" autocomplete="off" style="width:70%;"></el-input> -->
                        <el-input v-model="formObj.viewPreName" style="width:70%;"></el-input>
                    </el-form-item>

                    <p style="margin-top:10px;margin-bottom: 10px"><i class="el-icon-caret-right"></i><span style="width:120px;padding-left: 10px">走访人员调研信息</span><span class="hrs"></span></p>
                    <el-form-item label="是否知晓水库管护人员" prop="knowResManager">
                        <el-radio v-model="formObj.knowResManager" label="1">是</el-radio>
                        <el-radio v-model="formObj.knowResManager" label="2">否</el-radio>
                    </el-form-item>
                    <el-form-item label="对管护责任人的评价" prop="managerComment" v-if="formObj.knowResManager == '1'">
                        <el-radio v-model="formObj.managerComment" label="1">满意</el-radio>
                        <el-radio v-model="formObj.managerComment" label="2">一般</el-radio>
                        <el-radio v-model="formObj.managerComment" label="3">不满意</el-radio>
                    </el-form-item>
                    <el-form-item label="走访日期" prop="inspTm">
                        <el-date-picker
                        v-model="formObj.inspTm"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注" prop="note">
                        <el-input v-model="formObj.note" type="textarea" :rows="2"></el-input>
                    </el-form-item>

                    <el-form-item label="操作">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addSkZouFangSubmit('formObj')">确 定</el-button>
                    </el-form-item>
                </el-form>

            </el-main>

        </el-container>
    
    </el-dialog>
    <!-- </el-dialog> -->
</div>
</template>

<script>
import request from "@util/gw_ajax_request.js"
import {
    getskZouFangByrgstrId,
    getSkZouFangViewId,
    addZouFangRenYuanList_sk,
    updateZouFangRenYuanList_sk,
    getZouFangrenYuanListByViewId
} from "@api/duChaTianBao.js"
import {
    formatDateTimeD
} from "@util/gw_date.js"
export default {
    components: {

    },
    props: ['currentObjectRgstrId'],

    data() {
        var checkInput = (rule, value, callback) => {
            if (!value) {
               callback(new Error('请输入走访人员名称'));
            } else {
                callback();
            }
          };
        return {
            tableData: [],
            dialogFormVisible: false,
            viewId: '',
            formObj: {
                'viewPreName': '',
                'knowResManager': '',
                'managerComment': '',
                'note': '',
                'inspTm': '',
                'viewId': ''
            },
            rules: {
                viewPreName: [{
                        required: true,
                        validator: checkInput,
                        trigger: 'change'
                    },

                ],
            }

        }
    },
    computed: {
        recPersId() {
            return localStorage.getItem("userid") ? localStorage.getItem("userid") : ''
        }
    },
    mounted() {
        this.getZouFangCun();
    },
    watch: {
        currentObjectRgstrId(n, o) {
            this.getZouFangCun();
        },
        dialogFormVisible(val){
            if(!val){
                this.getRenYuanListData()
            }
        }
    },
    methods: {
        cancelHandler() {
            this.$emit('cancelHandler');
        },
        makesure() {
            this.$emit('cancelHandler');
            this.$emit('addShuiKuSuccess');
        },
        addHandler: function () {
            this.formObj= {
                'viewPreName': '',
                'knowResManager': '',
                'managerComment': '',
                'note': '',
                'viewId': '',
            }
            this.dialogFormVisible = true;
        },
        addZouFang: function () {
            this.dialogFormVisible = false;
        },
        getZouFangCun: function () {
            getskZouFangByrgstrId(this.currentObjectRgstrId).then(
                (res) => {
                    if (res.data && res.success) {
                        if(res.data.hasOwnProperty('viewId')){
                            this.viewId = res.data.viewId;
                            this.getRenYuanListData();
                        }else{
                            this.getSkZouFangViewId();
                        }
                    } else {
                        // console.log('未创建走访表，创建走访表');
                        this.getSkZouFangViewId();
                    }
                },
                (err) => {}
            );
        },
        getRenYuanListData: function () {
            let _self = this;
            getZouFangrenYuanListByViewId(this.viewId).then(
                (res) => {
                    // console.log(res);
                    _self.tableData = res.data.list;
                    _self.tableData.forEach((ele)=>{
                        if(ele.knowResManager == '2'){
                            ele.managerComment = ''
                        }
                    })
                    if(_self.tableData.length==0){
                         request.post("/dc/insp/rsvrRgstr/update",{
                            'viewStat':0,
                            'rgstrId':_self.currentObjectRgstrId
                        })
                        .then(res => {
                        
                        });
                    }
                },
                (err) => {

                }
            );
        },
        getSkZouFangViewId: function () {
            getSkZouFangViewId(this.recPersId, this.currentObjectRgstrId).then(
                (res) => {
                    console.log(res);
                    if (res.data && res.success) {

                        this.viewId = res.data.viewId;
                         this.getRenYuanListData();
                    } else {

                    }
                },
                (err) => {},
            );
        },
        addSkZouFangSubmit(formObj) {
            let _self =this;
            this.$refs[formObj].validate((valid) => {
                if (valid) {
                    let updateArray = this.tableData;
                    this.formObj['viewId'] = this.viewId;
                    updateArray.push(this.formObj);
                    updateZouFangRenYuanList_sk(updateArray, this.viewId, this.currentObjectRgstrId).then(
                        (res) => {
                            console.log(res);
                            
                            request
                            .post("/dc/rever/project", _self.addObj)
                            .then(res => {
                                if (res.success) {
                                _self.$message.success("修改成功");
                                request
                                    .post("/dc/insp/rsvrRgstr/update",{
                                        'viewStat':2,
                                        'rgstrId':_self.currentObjectRgstrId
                                    })
                                    .then(res => {
                                        _self.getRenYuanListData();
                                        _self.$emit("addShuiKuSuccess");
                                    });
                                }
                            });
                            this.dialogFormVisible = false;
                        }
                    );
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // addSkZouFangSubmit:function(){
        //   let updateArray = this.tableData;
        //   this.formObj['viewId'] = this.viewId;
        //   updateArray.push(this.formObj);
        //   updateZouFangRenYuanList_sk(updateArray,this.viewId,this.currentObjectRgstrId).then(
        //     (res) =>{
        //        console.log(res);
        //        this.getRenYuanListData();
        //         this.dialogFormVisible = false;
        //     }
        //   );
        // },
        manageItem: function (row) {
            let updateArray = [];
            this.tableData.forEach((element, index) => {
                if (element.viewPreName != row.viewPreName) {
                    updateArray.push(element);
                }
            });
            this.formObj = row;

            this.dialogFormVisible = true;
            this.tableData = updateArray
        },
        deleteItem: function (row) {
            let updateArray = [];
            this.tableData.forEach((element, index) => {
                if (element.viewPreId != row.viewPreId) {
                    updateArray.push(element);
                }
            });
            updateZouFangRenYuanList_sk(updateArray, this.viewId, this.currentObjectRgstrId).then(
                (res) => {
                    console.log(res);
                    this.getRenYuanListData();
                }
            );
        },
    },

}
</script>

<style>
#dcdxHeader {
    padding: 15px 20px;
}

#dxdcFooter {
    text-align: center;
}

#dxdcAside {
    border: 1px solid #d5d5ff;
}

.el-dialog__wrapper .el-treeWhite {
    /* max-height: 260px !important; */
}
</style>