fj-dc-ui/.svn/pristine/48/48d10fe49fb5aa8e900554cc18f41687a6f5e52b.svn-base

<template>
    <el-container>
        <el-header>
          <el-form :inline="true" size="mini" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="searchParam.persName" clearable placeholder="姓名" style="width: 130px;"></el-input>
            </el-form-item>
            <el-form-item label="是否在职">
              <el-select v-model="searchParam.isWork" clearable placeholder="是否在职" style="width: 130px;margin-left:10px;margin-right:15px">
                <el-option label="是" value="0"></el-option>
                <el-option label="否" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否公务员(参公)">
              <el-select v-model="searchParam.isCvlSrvnts" clearable placeholder="是否公务员(参公)" style="width: 130px;margin-left:10px;margin-right:15px">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="从事专业">
              <el-input v-model="searchParam.specialty" clearable placeholder="从事专业" style="width: 130px;margin-left:10px;margin-right:15px"></el-input>
            </el-form-item>
            <el-form-item label="专家岗位">
              <el-select v-model="searchParam.expertPost" clearable placeholder="专家岗位" style="width: 130px;margin-left:10px;margin-right:15px">
                <el-option label="前期设计" value="1"></el-option>
                <el-option label="建设管理" value="2"></el-option>
                <el-option label="计划管理" value="3"></el-option>
                <el-option label="财务管理" value="4"></el-option>
                <el-option label="质量管理" value="5"></el-option>
                <el-option label="运行管理" value="6"></el-option>
                <el-option label="水土保持" value="7"></el-option>
                <el-option label="水文水资源" value="8"></el-option>
                <el-option label="安全生产" value="9"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职称">
              <el-input v-model="searchParam.dppost" clearable placeholder="职称" style="width: 130px;margin-left:10px;margin-right:15px"></el-input>
            </el-form-item>
            <el-button type="primary" icon="el-icon-plus" style="float:right;margin-left:10px;" plain @click="showDialog">新增</el-button>
            <el-button type="primary" icon="el-icon-document" style="float:right;margin-left:10px;" plain @click="exportExcel">导出</el-button>
            <el-button type="primary" icon="el-icon-search" style="float:right;margin-left:10px;" plain @click="search">查询</el-button>
          </el-form>
        </el-header>
        <el-main class="main-container">
          <el-table
            :data="tableData"
            border
            v-loading="loading"
            ref="expert"
            style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="80">
              <template slot-scope="scope">{{ (pageIndex - 1) * pageSize + (scope.$index + 1) }}</template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="persName"
              width="100"
              label="姓名"
              align="center">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="sex"
              label="性别"
              align="center"
              width="50">
              <template slot-scope="scope">
                <span v-if="scope.row.sex=='2'">女</span>
                <span v-if="scope.row.sex=='1'">男</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              width="80"
              prop="age"
              align="center"
              label="年龄">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="isWork"
              align="center"
              width="120"
              label="是否在职">
              <template slot-scope="scope">
                <span v-if="scope.row.isWork=='0'">在职</span>
                <span v-if="scope.row.isWork=='1'">不在职</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="isCvlSrvnts"
              align="center"
              width="200"
              label="是否为公务员（参公）">
              <template slot-scope="scope">
                <span v-if="scope.row.isCvlSrvnts=='1'">是</span>
                <span v-if="scope.row.isCvlSrvnts=='2'">否</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              prop="specialty"
              width="200"
              label="从事专业">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              prop="admDuty"
              width="160"
              label="职务">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              align="center"
              prop="dppost"
              width="180"
              label="职称">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="dpnm"
              align="center"
              width="160"
              label="工作单位">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="expertPost"
              align="center"
              width="120"
              label="专家岗位">
              <template slot-scope="scope">
                <span>{{formatExpertPost(scope.row.expertPost)}}</span>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="mobilenumb"
              align="center"
              width="160"
              label="本人电话">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="email"
              align="center"
              width="160"
              label="电子邮箱">
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="remark"
              align="center"
              width="160"
              label="备注">
            </el-table-column>
            <el-table-column
              prop=""
              fixed="right"
              width="350"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="editRow(scope.row)">编辑</el-button>
                <el-button type="danger"  size="mini"  @click="deleteRow(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total,prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageIndex"
            :total="total">
          </el-pagination>
        </el-main>
      <el-dialog :title="dialogTitle+'计划'" :visible.sync="dialogVisible" width="800px">
        <el-form ref="form" :model="addObj" label-width="120px" size="mini" :rules="rule">

              <el-form-item label="姓名" prop="persName" required>
                <el-input v-model="addObj.persName" clearable class="item-width" ></el-input>
              </el-form-item>
              <el-form-item label="工作单位" prop="dpnm">
                <el-input v-model="addObj.dpnm" clearable class="item-width"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="sex">
                <el-select v-model="addObj.sex" clearable class="item-width">
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="专家岗位" prop="expertPost">
                <el-select v-model="expertPostList" clearable class="item-width"  multiple collapse-tags>
                  <el-option label="前期设计" value="1"></el-option>
                  <el-option label="建设管理" value="2"></el-option>
                  <el-option label="计划管理" value="3"></el-option>
                  <el-option label="财务管理" value="4"></el-option>
                  <el-option label="质量管理" value="5"></el-option>
                  <el-option label="运行管理" value="6"></el-option>
                  <el-option label="水土保持" value="7"></el-option>
                  <el-option label="水文水资源" value="8"></el-option>
                  <el-option label="安全生产" value="9"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="年龄" prop="age">
                <el-input v-model="addObj.age" clearable class="item-width"></el-input>
              </el-form-item>
              <el-form-item label="本人电话" prop="mobilenumb" required>
                <el-input v-model="addObj.mobilenumb" clearable class="item-width"></el-input>
              </el-form-item>

              <el-form-item label="是否在职" prop="isWork">
                <el-select v-model="addObj.isWork" clearable class="item-width">
                  <el-option label="在职" value="0"></el-option>
                  <el-option label="不在职" value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="addObj.email" clearable class="item-width"></el-input>
              </el-form-item>

              <el-form-item label="是否公务员(参公)" prop="isCvlSrvnts">
                <el-select v-model="addObj.isCvlSrvnts" clearable class="item-width">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="2"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="身份证号" prop="idNumber">
                <el-input v-model="addObj.idNumber" clearable class="item-width"></el-input>
              </el-form-item>

              <el-form-item label="从事专业" prop="specialty">
                <el-input v-model="addObj.specialty" clearable class="item-width"></el-input>
              </el-form-item>

              <el-form-item label="职务" prop="admDuty">
                <el-input v-model="addObj.admDuty" clearable class="item-width"></el-input>
              </el-form-item>

              <el-form-item label="职称" prop="dppost">
                <el-input v-model="addObj.dppost" clearable class="item-width"></el-input>
              </el-form-item>

              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="addObj.remark" style="resize: none;" class="item-width"></el-input>
              </el-form-item>


            <el-form-item label="简历">
              <el-upload
                class="upload-demo"
                multiple
                ref="addUpload"
                :auto-upload="isAutoUpload"
                :show-file-list="isShowFile"
                :on-success="uploadSuccess"
                :on-change="changeFileList"
                :on-remove="removeFileList"
                :on-error="upError"
                :headers="header"
                :action="`/pdcApi/file/insert?bizId=${this.bizId}`">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip"></div>
              </el-upload>
            </el-form-item>
            <div style="width:100%;height:120px;overflow:auto;" v-if="isAutoUpload">
              <el-table
                :data="fileList"
                border
                style="width: 100%">
                <el-table-column
                  prop="fileName"
                  label="文件名"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop=""
                  align="center"
                  label="操作">
                  <template slot-scope="scope">
                    <span><a :href="scope.row.filePath" download style="color:#66b1ff">下载</a></span>&nbsp;&nbsp;
                    <span style="color:palevioletred" @click="removeFile(scope.row.id)">删除</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center">
          <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" size="mini" @click="addExpert">确 定</el-button>
        </div>
      </el-dialog>
</el-container>
</template>
<script>
import request from '@util/gw_ajax_request'
import {deleteFileById} from "@api/duChaAPI.js";
import {exportModel} from "@util/gw_exportModel";
export default {
    props: [],
    components: {

    },
    data() {
        return {
            header: {
                'persId': localStorage.getItem('userid'),
                'accessToken' : localStorage.getItem('accessToken')
            },
            expertList:[
                {label:"前期设计",value:"1"},
                {label:"建设管理", value:"2"},
                {label:"计划管理", value:"3"},
                {label:"财务管理", value:"4"},
                {label:"质量管理", value:"5"},
                {label:"运行管理", value:"6"},
                {label:"水土保持", value:"7"},
                {label:"水文水资源", value:"8"},
                {label:"安全生产", value:"9"}
            ],
            expertPostList:[],
            dialogTitle:"",
            dialogVisible:false,
            loading:false,
            tableData:[],
            pageIndex:1,
            pageSize:10,
            total:0,
            searchParam:{
                persName:"",
                isWork:"",
                isCvlSrvnts:"",
                specialty:"",
                expertPost:"",
                dppost:""
            },
            addObj:{

            },
            rule: {
                persName: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                mobilenumb: [
                    { required: true, message: '号码不能为空', trigger: 'blur' },
                    { required: true,
                        pattern: /^1[3|4|5|7|8][0-9]{9}$/,
                        message: '请输入正确的号码',
                        trigger: 'blur'
                    }
                ]
            },
            bizId:"",
            isAutoUpload:false,
            isShowFile:false,
            fileList: [],
            fileCount:0,
        }
    },
    computed:{
        userId:function(){
            return localStorage.getItem("userid")? localStorage.getItem("userid"): '1098101939614724096'
        },
    },
    watch:{

    },
    mounted(){
      this.search();
    },
    methods:{
        async exportExcel() {
            let url = "/pdcApi/bis/insp/all/worker/pers/export";
            let type = "POST";
            let exportName = "专家库数据.xls"
            let result = await exportModel(type, url, exportName,JSON.stringify(this.searchParam));
        },
        formatExpertPost(val){
            var arr = [];
            if(!val){
               return "";
            }
            for(var i = 0;i<val.split(",").length;i++){
                for(var j = 0;j<this.expertList.length;j++){
                  if(val.split(",")[i]==this.expertList[j].value){
                      arr.push(this.expertList[j].label);
                  }
                }
            }
            return arr.join(",");
        },
        deleteRow(id){
            var _self = this;
            this.$confirm('此操作将专家从列表中删除，确认删除该专家吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.post(`/bis/insp/all/worker/pers/delete/${id}`).then((res)=>{
                    if(res.success){
                        _self.search();
                        _self.$message.success('删除成功')
                    }else{
                        _self.$message.error(res.message)
                    }
                });
            })
        },
        addExpert(){
            var _self = this;
            this.addObj.expertPost = this.expertPostList.length>0?this.expertPostList.join(","):null;
            this.$refs["form"].validate(valid =>{
                if(valid){
                    request.post(`/bis/insp/all/worker/pers`,this.addObj).then(res =>{

                        if(res.success) {
                            _self.bizId = res.data.id;
                            _self.addObj = {};
                            _self.dialogVisible = false;
                            if(_self.fileList.length>0 && !_self.isAutoUpload){
                                _self.$nextTick(() => {
                                    _self.$refs.addUpload.submit();
                                });
                            }else{
                                _self.search();
                            }
                        }else{
                            _self.$message.error(res.message);
                        }
                    })
                }else{
                    return false;
                }
            })
        },
        editRow(row){

            this.bizId = row.id;
            this.isAutoUpload = true;
            this.isShowFile = false;
            this.addObj = {};
            this.expertPostList = [];
            this.dialogVisible = true;
            this.addObj = row;
            this.expertPostList = this.addObj.expertPost?this.addObj.expertPost.split(","):null;
            this.dialogTitle = "编辑专家";
            this.getFileList();
        },
        removeFile(id) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "返回",
                type: "warning"
            }).then(
                res => {
                    if (res === "confirm") {
                        deleteFileById(id,this.userId).then(res => {
                            if (res.success) {
                                this.getFileList();
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                }
            );

        },
        getFileList(){
            let params = {
                bizId: this.bizId
            }
            request.post(`/file/findPageInfo`,params).then(res =>{
                if(res.success) {
                    this.fileList = res.data.list;
                }
            })
        },
        init() {
            this.$refs.addUpload.clearFiles();
            this.fileCount = 0;
            this.fileList = [];
        },
        uploadSuccess(response, file, fileList){
            this.getFileList();
            this.fileCount++;
            if(this.fileCount==this.fileList.length){
                this.search();
                this.init();
            }
        },
        upError(err, file, fileList){
            this.$message.error("上传出错，请修改文件！");
            this.init();
            this.search();
        },
        changeFileList(file, fileList) {
            this.fileList = fileList;
        },
        removeFileList(file, fileList) {
            this.fileList = fileList;
        },
        showDialog(){
          this.addObj = {};
          this.isAutoUpload = false;
          this.isShowFile = true;
          this.fileList = [];
          this.expertPostList = [];
          this.dialogTitle = "添加专家";
          this.dialogVisible = true;
        },
        search(){
            var _self = this;
            this.loading = true;
            this.searchParam.pageNum = this.pageIndex;
            this.searchParam.pageSize = this.pageSize;
            request.post('/bis/insp/all/worker/pers/findPage',this.searchParam).then((res)=>{
                if(res.success){
                    _self.tableData = res.data.list;
                    _self.total = res.data.total;
                    _self.loading = false;
                    _self.$nextTick(()=>{
                        _self.$refs.expert.doLayout();
                    })
                }
            });
        },
        handleSizeChange(val){
            this.pageSize = val;
            this.search();
        },
        handleCurrentChange(val){
            this.pageIndex = val;
            this.search();
        },
    },
    activated() {

    }
}
</script>
<style scoped>
  .el-container{
     height:100%;
  }
  .el-header{
    display: flex;
    align-items: center;
  }
  .main-container .el-table{
    height:calc(100% - 40px);
  }
  .main-container  /deep/ .el-table__body-wrapper{
    height:calc(100% - 40px);
    overflow: auto;
  }
  .item-width{
    width:90%;
  }
</style>