|
|
<template> <div class="mod-config"> <el-dialog width="600px" :title="!dataForm.id ? '添加' :'编辑'" :close-on-click-modal="false" :visible.sync="visible"> <el-form :inline="true" label-position="top" label-width="100px" :rules="projectRole"> <el-form-item :label="'项目层级'" prop="projectLevel" :rules="projectRole.projectLevel"> <el-select v-model="dataForm.projectLevel" style="width: 130px"> <el-option label="一级" value=1></el-option> <el-option label="二级" value=2></el-option> <el-option label="三级" value=3></el-option> </el-select> </el-form-item>
<el-form-item :label="'项目号'"> <el-input v-model="dataForm.projectId" style="width: 130px" disabled></el-input> </el-form-item>
<el-form-item prop="projectType" :rules="projectRole.projectType"> <span slot="label" style="" @click="getBaseList(1010,1)"><a herf="#">项目类型</a></span> <el-input v-model="dataForm.projectType" style="width: 130px" readonly @focus="getBaseList(1010,1)"></el-input> </el-form-item> <el-form-item prop="customerName" :rules="projectRole.customerName"> <span slot="label" style="" @click="getBaseList(102,1)"><a herf="#">所属客户</a></span> <el-input v-model="dataForm.customerName" style="width: 130px" readonly @focus="getBaseList(102,1)"></el-input> </el-form-item> </el-form>
<el-form :inline="true" label-position="top" label-width="100px" :rules="projectRole"> <el-form-item :label="'项目名称'" prop="projectName" :rules="projectRole.projectName"> <el-input v-model="dataForm.projectName" style="width: 562px" ></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" label-width="100px" > <el-form-item :label="'项目描述'" > <el-input v-model="dataForm.projectDesc" style="width: 562px" ></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" label-width="100px" :rules="projectRole"> <el-form-item prop="projectSourceDesc" :rules="projectRole.buDesc"> <span slot="label" style="" @click="getBaseList(106,1)"><a herf="#">BU</a></span> <el-input v-model="dataForm.buDesc" style="width: 130px" readonly @focus="getBaseList(106,1)"></el-input> </el-form-item> <el-form-item prop="projectSourceDesc" :rules="projectRole.projectSourceDesc"> <span slot="label" style="" @click="getBaseList(1011,1)"><a herf="#">项目来源</a></span> <el-input v-model="dataForm.projectSourceDesc" style="width: 130px" readonly @focus="getBaseList(1011,1)"></el-input> </el-form-item> <el-form-item prop="priorityDesc" :rules="projectRole.priorityDesc"> <span slot="label" style="" @click="getBaseList(1012,1)"><a herf="#">优先级</a></span> <el-input v-model="dataForm.priorityDesc" style="width: 130px" readonly @focus="getBaseList(1012,1)"></el-input> </el-form-item> <el-form-item :label="'要求日期：'" prop="needDate" :rules="projectRole.needDate"> <el-date-picker style="width: 130px" v-model="dataForm.needDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker> </el-form-item> </el-form> <el-form :inline="true" label-position="top" label-width="100px" :rules="projectRole"> <el-form-item prop="projectManagerName" :rules="projectRole.projectManagerName"> <span slot="label" style="" @click="managerChooseModal()"><a herf="#">项目经理</a></span> <el-input v-model="dataForm.projectManagerName" readonly style="width: 274px" @focus="managerChooseModal()"></el-input> </el-form-item> <el-form-item prop="projectOwnerName" :rules="projectRole.projectOwnerName"> <span slot="label" style="" @click="ownerChooseModal()"><a herf="#">项目负责人</a></span> <el-input v-model="dataForm.projectOwnerName" readonly style="width: 274px" @focus="ownerChooseModal()"></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" label-width="100px" > <el-form-item :label="'客户应用/要求'"> <el-input v-model="dataForm.customerRemark" style="width: 562px" ></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" label-width="100px" > <el-form-item :label="'其他要求'"> <el-input v-model="dataForm.remark" style="width: 562px" ></el-input> </el-form-item> </el-form> <el-form :inline="true" label-position="top" label-width="100px" :rules="projectRole"> <el-form-item prop="userRoleName" :rules="projectRole.userRoleName"> <span slot="label" style="" @click="userRollModal()"><a herf="#">项目权限</a></span> <el-input v-model="dataForm.userRoleName" style="width: 562px" @focus="userRollModal()"></el-input> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="dataFormSubmit()">{{'确定'}}</el-button> <el-button type="primary" @click="visible = false">{{'关闭'}}</el-button> </span> </el-dialog> <el-dialog width="530px" title="项目经理" :close-on-click-modal="false" :visible.sync="managerFlag"> <el-transfer class="rq" filterable v-model="projectManagerList" :props="{ key: 'operatorId', label: 'operatorName' }" :data="operatorList" :titles="['未选择', '已选择']"></el-transfer> <span slot="footer" class="dialog-footer"> <div style="margin-top: 5px"> <el-button type="primary" @click="saveManagerList()">确定</el-button> <el-button @click="managerFlag = false" type="primary">取消</el-button> </div> </span> </el-dialog>
<el-dialog width="530px" title="项目负责人" :close-on-click-modal="false" :visible.sync="ownerFlag"> <el-transfer class="rq" filterable v-model="projectOwnerList" :props="{ key: 'operatorId', label: 'operatorName' }" :data="operatorList" :titles="['未选择', '已选择']"></el-transfer> <span slot="footer" class="dialog-footer"> <div style="margin-top: 5px"> <el-button type="primary" @click="saveOwnerList()">确定</el-button> <el-button @click="ownerFlag = false" type="primary">取消</el-button> </div> </span> </el-dialog>
<el-dialog width="530px" title="权限" :close-on-click-modal="false" :visible.sync="userRoleFlag"> <el-table :data="userRoleList" border :height="300" v-loading="false" style="width: 100%;"> <el-table-column prop="username" header-align="center" align="center" min-width="35" label="账号"> </el-table-column> <el-table-column prop="userDisplay" header-align="center" align="center" min-width="35" label="姓名"> </el-table-column> <el-table-column prop="" header-align="center" align="center" min-width="30" label=""> <template slot-scope="scope"> <!-- 如果数据为Y，显示勾选框，否则不勾选 --> <el-checkbox v-model="scope.row.checkAll" @change="changeAll(scope.row)"></el-checkbox> </template> </el-table-column> <el-table-column prop="" header-align="center" align="center" min-width="30" label="查询"> <template slot-scope="scope"> <!-- 如果数据为Y，显示勾选框，否则不勾选 --> <el-checkbox v-model="scope.row.searchCheck" @change="changeCheck(scope.row,1)"></el-checkbox> </template> </el-table-column> <el-table-column prop="" header-align="center" align="center" min-width="30" label="修改"> <template slot-scope="scope"> <!-- 如果数据为Y，显示勾选框，否则不勾选 --> <el-checkbox v-model="scope.row.updateCheck" @change="changeCheck(scope.row,2)"></el-checkbox> </template> </el-table-column> <el-table-column prop="" header-align="center" align="center" min-width="30" label="下载"> <template slot-scope="scope"> <!-- 如果数据为Y，显示勾选框，否则不勾选 --> <el-checkbox v-model="scope.row.downCheck" @change="changeCheck(scope.row,3)"></el-checkbox> </template> </el-table-column> <el-table-column prop="" header-align="center" align="center" min-width="30" label="删除"> <template slot-scope="scope"> <!-- 如果数据为Y，显示勾选框，否则不勾选 --> <el-checkbox v-model="scope.row.deleteCheck" @change="changeCheck(scope.row,4)"></el-checkbox> </template> </el-table-column> </el-table>
<span slot="footer" class="dialog-footer"> <div style="margin-top: 5px"> <el-button type="primary" @click="saveUserList()">确定</el-button> <el-button @click="userRoleFlag = false" type="primary">取消</el-button> </div> </span> </el-dialog> <Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist> </div></template>
<script> import {projectInfoSearch, searchOperatorWithSite, searchProjectTeamStr, searchUserRoll, saveProjectInfo, } from "@/api/project/project.js" import Chooselist from '@/views/modules/common/Chooselist' export default { components: { Chooselist }, data () { return { tagNo:'', tagNo1:'', visible: false, treeVisible: false, managerFlag:false, userRoleFlag:false, ownerFlag:false, operatorList:[], dataForm: { id: 0, site:this.$store.state.user.site, projectLevel:1, projectId:'', projectTypeDb:'', projectType:'', customerName:'', customerId:'', projectName:'', projectDesc:'', needDate:'', priority:'', projectSource:'', priorityDesc:'', projectSourceDesc:'', projectManagerName:'', projectOwnerName:'', customerRemark:'', remark:'', userRoleName:'', projectManagerList:[], projectOwnerList:[], userRoleList:[], buNo:[], buDesc:[], }, projectManagerList:[], projectOwnerList:[], userRoleList:[], projectRole: { projectLevel: [ { required: true, message: ' ', trigger: 'change' } ], projectType: [ { required: true, message: ' ', trigger: 'change' } ], customerName: [ { required: true, message: ' ', trigger: 'change' } ], projectName: [ { required: true, message: ' ', trigger: 'change' } ], buDesc: [ { required: true, message: ' ', trigger: 'change' } ], projectSourceDesc: [ { required: true, message: ' ', trigger: 'change' } ], priorityDesc: [ { required: true, message: ' ', trigger: 'change' } ], needDate: [ { required: true, message: ' ', trigger: 'change' } ], projectManagerName: [ { required: true, message: ' ', trigger: 'change' } ], projectOwnerName: [ { required: true, message: ' ', trigger: 'change' } ], userRoleName: [ { required: true, message: ' ', trigger: 'change' } ], } } }, created () {
}, methods: { // 获取基础数据列表S
getBaseList (val, type) { this.tagNo = val this.tagNo1 = type this.$nextTick(() => { let strVal = '' if (val === 1010) { if(type==1) { strVal = this.dataForm.projectTypeDb } } if (val === 106) { if(type==1) { strVal = this.dataForm.buNo } } if (val === 102) { if(type==1) { strVal = this.dataForm.customerId } } if (val === 1011) { if(type==1) { strVal = this.dataForm.projectSource } } if (val === 1012) { if(type==1) { strVal = this.dataForm.priority } } this.$refs.baseList.init(val, strVal) }) }, /* 列表方法的回调 */ getBaseData (val) { if (this.tagNo === 1010) { if(this.tagNo1==1) { this.dataForm.projectTypeDb = val.Base_id this.dataForm.projectType = val.Base_desc } } if (this.tagNo === 102) { if(this.tagNo1==1) { this.dataForm.customerId = val.Customer_no this.dataForm.customerName = val.Customer_desc } } if (this.tagNo === 1011) { if(this.tagNo1==1) { this.dataForm.projectSource = val.Base_id this.dataForm.projectSourceDesc = val.Base_desc } } if (this.tagNo === 1012) { if(this.tagNo1==1) { this.dataForm.priority = val.Base_id this.dataForm.priorityDesc = val.Base_desc } } if (this.tagNo === 106) { if(this.tagNo1==1) { this.dataForm.buNo = val.Bu_no this.dataForm.buDesc = val.Bu_desc } } }, init (id) { this.dataForm.id = id || 0 if(this.dataForm.id!=0){ let inData={ page: 1, limit: 10, id:id } projectInfoSearch(inData).then(({data}) => { if(data.page.list.length>0){ this.dataForm= data.page.list[0]; let inData={ site:this.dataForm.site, projectId:this.dataForm.projectId, type:'manager', } searchProjectTeamStr(inData).then(({data}) => { this.dataForm.projectManagerList=data.rows }) let inData2={ site:this.dataForm.site, projectId:this.dataForm.projectId, type:'owner', } searchProjectTeamStr(inData2).then(({data}) => { this.dataForm.projectOwnerList=data.rows }) let inData3={ site:this.dataForm.site, projectId:this.dataForm.projectId, } searchUserRoll(inData3).then(({data}) => { this.dataForm.userRoleList=data.rows }) } }) }else { this.dataForm={ id: 0, site:this.$store.state.user.site, projectLevel:1, projectId:'', projectTypeDb:'', projectType:'', customerName:'', customerId:'', projectName:'', projectDesc:'', needDate:'', priority:'', projectSource:'', priorityDesc:'', projectSourceDesc:'', projectManagerName:'', projectOwnerName:'', customerRemark:'', remark:'', userRoleName:'', projectManagerList:[], projectOwnerList:[], buNo:'', buDesc:'', } let inData={ site:this.dataForm.site, projectId:this.dataForm.projectId, } searchUserRoll(inData).then(({data}) => { this.dataForm.userRoleList=data.rows }) } this.visible = true },
managerChooseModal(){ let inData={ site:this.dataForm.site, projectId:this.dataForm.projectId, } searchOperatorWithSite(inData).then(({data}) => { this.operatorList=data.rows }) this.projectManagerList = JSON.parse(JSON.stringify(this.dataForm.projectManagerList)); this.managerFlag=true }, saveManagerList(){ let projectManagerName=''; for (let i = 0; i < this.projectManagerList.length; i++) { let select= this.operatorList.filter(item => item.operatorId === this.projectManagerList[i]) if(select.length>0){ projectManagerName+=select[0].operatorName+';' } } this.dataForm.projectManagerName=projectManagerName this.dataForm.projectManagerList=JSON.parse(JSON.stringify(this.projectManagerList)); this.managerFlag=false }, ownerChooseModal(){ let inData={ site:this.dataForm.site, projectId:this.dataForm.projectId, } searchOperatorWithSite(inData).then(({data}) => { this.operatorList=data.rows }) this.projectOwnerList = JSON.parse(JSON.stringify(this.dataForm.projectOwnerList)); this.ownerFlag=true }, saveOwnerList(){ let projectOwnerName=''; for (let i = 0; i < this.projectOwnerList.length; i++) { let select= this.operatorList.filter(item => item.operatorId === this.projectOwnerList[i]) if(select.length>0){ projectOwnerName+=select[0].operatorName+';' } } this.dataForm.projectOwnerName=projectOwnerName this.dataForm.projectOwnerList=JSON.parse(JSON.stringify(this.projectOwnerList)); this.ownerFlag=false }, userRollModal(){ this.userRoleList=JSON.parse(JSON.stringify(this.dataForm.userRoleList)); for (let i = 0; i <this.userRoleList.length ; i++) { if(this.userRoleList[i].username==this.$store.state.user.name){ this.userRoleList[i].searchCheck=true; this.userRoleList[i].updateCheck=true; this.userRoleList[i].downCheck=true; this.userRoleList[i].deleteCheck=true; this.userRoleList[i].searchFlag='Y' this.userRoleList[i].updateFlag='Y' this.userRoleList[i].downFlag='Y' this.userRoleList[i].deleteFlag='Y' } } this.userRoleFlag=true }, saveUserList(){ for (let i = 0; i <this.userRoleList.length ; i++) { if(this.userRoleList[i].username==this.$store.state.user.name){ this.userRoleList[i].searchCheck=true; this.userRoleList[i].updateCheck=true; this.userRoleList[i].downCheck=true; this.userRoleList[i].deleteCheck=true; this.userRoleList[i].searchFlag='Y' this.userRoleList[i].updateFlag='Y' this.userRoleList[i].downFlag='Y' this.userRoleList[i].deleteFlag='Y' } } let name= ''; for (let i = 0; i < this.userRoleList.length; i++) { if(this.userRoleList[i].searchCheck||this.userRoleList[i].updateCheck||this.userRoleList[i].downCheck||this.userRoleList[i].deleteCheck){ name+=this.userRoleList[i].userDisplay+';' } } this.dataForm.userRoleName=name this.dataForm.userRoleList=JSON.parse(JSON.stringify(this.userRoleList)); this.userRoleFlag=false }, changeAll(row){ if(row.checkAll){ row.searchCheck=true; row.updateCheck=true; row.downCheck=true; row.deleteCheck=true; row.searchFlag='Y' row.updateFlag='Y' row.downFlag='Y' row.deleteFlag='Y' }else { row.searchCheck=false; row.updateCheck=false; row.downCheck=false; row.deleteCheck=false; row.searchFlag='N' row.updateFlag='N' row.downFlag='N' row.deleteFlag='N' } }, changeCheck(row,type){ if(type==1){ if(row.searchCheck){ row.searchFlag='Y' }else { row.searchFlag='N' } } if(type==2){ if(row.updateCheck){ row.updateFlag='Y' }else { row.updateFlag='N' } } if(type==3){ if(row.downCheck){ row.downFlag='Y' }else { row.downFlag='N' } } if(type==4){ if(row.deleteCheck){ row.deleteFlag='Y' }else { row.deleteFlag='N' } } if(row.searchCheck&&row.updateCheck&&row.downCheck&&row.deleteCheck){ row.checkAll=true }else{ row.checkAll=false } this.$forceUpdate(); }, // 表单提交
dataFormSubmit () { if(this.dataForm.projectTypeDb==''||this.dataForm.projectTypeDb==null){ this.$alert('请选择项目类型！', '错误', { confirmButtonText: '确定' }) return false; } if(this.dataForm.customerId==''||this.dataForm.customerId==null){ this.$alert('请选择所属客户！', '错误', { confirmButtonText: '确定' }) return false; } if(this.dataForm.projectName==''||this.dataForm.projectName==null){ this.$alert('请输入项目名称！', '错误', { confirmButtonText: '确定' }) return false; } if(this.dataForm.projectSource==''||this.dataForm.projectSource==null){ this.$alert('请选择项目来源！', '错误', { confirmButtonText: '确定' }) return false; } if(this.dataForm.buDesc==''||this.dataForm.buDesc==null){ this.$alert('请选择BU！', '错误', { confirmButtonText: '确定' }) return false; } if(this.dataForm.priority==''||this.dataForm.priority==null){ this.$alert('请选择优先级！', '错误', { confirmButtonText: '确定' }) return false; } if(this.dataForm.needDate==''||this.dataForm.needDate==null){ this.$alert('请选择要求日期！', '错误', { confirmButtonText: '确定' }) return false; } if(this.dataForm.projectManagerName==''||this.dataForm.projectManagerName==null){ this.$alert('请选择项目经理！', '错误', { confirmButtonText: '确定' }) return false; } if(this.dataForm.projectOwnerName==''||this.dataForm.projectOwnerName==null){ this.$alert('请选择项目负责人！', '错误', { confirmButtonText: '确定' }) return false; } if(this.dataForm.userRoleName==''||this.dataForm.userRoleName==null){ this.$alert('请选择权限！', '错误', { confirmButtonText: '确定' }) return false; } saveProjectInfo(this.dataForm).then(({data}) => { if (data && data.code === 0) { this.$message.success( '操作成功') this.visible = false this.$emit('refreshDataList') } else { this.$message.error(data.msg) } })
}, }, }</script>
<style > .el-transfer-panel { border: 2px solid #17b3a3; border-radius: 4px; overflow: hidden; background: #fff; display: inline-block; vertical-align: middle; width: 200px; max-height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; }
.el-transfer-panel .el-transfer-panel__header { height: 40px; line-height: 40px; background: #17b3a3; margin: 0; padding-left: 15px; border-bottom: 1px solid #17b3a3; -webkit-box-sizing: border-box; box-sizing: border-box; color: #000; }
.el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label { font-size: 14px; color: #303133; font-weight: 400; }</style>
|
