|
|
<template> <div class="mod-config"> <el-dialog width="40%" :title="value === 'save' ? '新增-项目' :value === 'update'?'修改-项目':'新增-子项目'" :close-on-click-modal="false" :visible.sync="visible" @close="closeSaveDialog"> <el-form ref="saveForm" :model="dataForm" label-position="top" label-width="100px" :rules="projectRole"> <el-row :gutter="25"> <el-col :span="6"> <el-form-item :label="(value !=='save' && value !== 'update')?'上级项目号':'项目号'"> <el-input v-model="dataForm.projectId" disabled ></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="项目名称" prop="projectName"> <el-input v-model="dataForm.projectName" ></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item prop="projectTypeDb" label="项目类型"> <dict-data-select dict-type="project_info_type_db" v-if="visible" v-model="dataForm.projectTypeDb"></dict-data-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item prop="projectSource" :rules="projectRole.projectSourceDesc" label="项目来源"> <dict-data-select dict-type="project_info_source" v-if="visible" v-model="dataForm.projectSource"></dict-data-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item prop="priority" label="优先级"> <dict-data-select dict-type="project_info_priority" v-if="visible" v-model="dataForm.priority"></dict-data-select> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="要求日期：" prop="needDate"> <el-date-picker style="width: 100%" v-model="dataForm.needDate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker> </el-form-item> </el-col> <el-col :span="6"> <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 ></el-input> </el-form-item> </el-col> <el-col :span="6"> <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 ></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item prop="customerId"> <span slot="label" style="" @click="getBaseList(102,1)"><a herf="#">直接客户</a></span> <el-input v-model="dataForm.customerId" @blur="getCustomerName(1)"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item prop="customerName" label="直接客户名称："> <el-input v-model="dataForm.customerName" disabled ></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item > <span slot="label" style="" @click="getBaseList(102,2)"><a herf="#">终端客户</a></span> <el-input v-model="dataForm.finalCustomerId" @blur="getCustomerName(2)"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="终端客户名称："> <el-input v-model="dataForm.finalCustomerName" disabled ></el-input> </el-form-item> </el-col> </el-row> <el-form-item label="项目描述" style="height: 70px"> <el-input type="textarea" resize="none" :autosize="{minRows: 2, maxRows: 2}" v-model="dataForm.projectDesc" ></el-input> </el-form-item> <el-form-item label="客户应用/要求" style="height: 70px"> <el-input type="textarea" resize="none" :autosize="{minRows: 2, maxRows: 2}" v-model="dataForm.customerRemark" ></el-input> </el-form-item> <el-form-item label="其他要求" style="height: 70px"> <el-input type="textarea" resize="none" :autosize="{minRows: 2, maxRows: 2}" v-model="dataForm.remark" ></el-input> </el-form-item> <el-form-item prop="userRoleName" :rules="projectRole.userRoleName"> <span slot="label" style="" @click="userRollModal('none')"><a herf="#">项目权限</a></span> <el-input v-model="dataForm.userRoleName" ></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-form :inline="true" :model="userRoleForm" label-position="top"> <el-form-item label="账号"> <el-input v-model="userRoleForm.username" placeholder=" "></el-input> </el-form-item> <el-form-item label="姓名"> <el-input v-model="userRoleForm.userDisplay" placeholder=" "></el-input> </el-form-item> <el-form-item label=" "> <el-button type="primary" @click="searchUserRoll('none')">查询</el-button> </el-form-item> </el-form> <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="header" slot-scope="scope"> <el-checkbox :indeterminate="saveCheckAllIndeterminate" v-model="saveCheckAll" true-label="Y" false-label="N" @change="changeSaveCheckAll"></el-checkbox> </template> <template slot-scope="scope"> <!-- 如果数据为Y，显示勾选框，否则不勾选 --> <el-checkbox :indeterminate="userRoleIndeterminateList[scope.$index]" 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' import DictDataSelect from "../../sys/dict-data-select.vue"; import {queryCustomer } from "@/api/customer/customerInformation";
export default { model:{ prop:'value', event:'change', }, props:{ value:{ required:true, type:String, } }, components: { DictDataSelect, 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:'', finalCustomerName:'', customerId:'', finalCustomerId:'', projectName:'', projectDesc:'', needDate:'', priority:'', projectSource:'', priorityDesc:'', projectSourceDesc:'', projectManagerName:'', projectOwnerName:'', customerRemark:'', remark:'', userRoleName:'', projectManagerList:[], projectOwnerList:[], userRoleList:[], }, userRoleForm:{ username:'', userDisplay:'', }, projectManagerList:[], projectOwnerList:[], userRoleList:[], projectRole: { projectLevel: [ { required: true, message: ' ', trigger: ['change','blur'] } ], customerName: [ { required: true, message: ' ', trigger: ['change','blur'] } ], projectName: [ { required: true, message: ' ', trigger: ['change','blur'] } ], customerId: [ { required: true, message: ' ', trigger: ['change','blur'] } ], needDate: [ { required: true, message: ' ', trigger: ['change','blur'] } ], projectManagerName: [ { required: true, message: ' ', trigger: 'change' } ], projectOwnerName: [ { required: true, message: ' ', trigger: 'change' } ], userRoleName: [ { required: true, message: ' ', trigger: 'change' } ], }, saveCheckAll:'N', } }, created () {
}, watch:{ userRoleFlag(newVal,oldVal){ if (newVal === false){ this.userRoleForm.username = '' this.userRoleForm.userDisplay = '' // this.saveCheckAll='N'
} }, }, computed:{ saveCheckAllIndeterminate(){ if (this.userRoleList.every(item => item.checkAll === true)){ this.saveCheckAll = 'Y' return false }else if (this.userRoleList.every(item => item.checkAll === false)){ this.saveCheckAll = 'N' return false }else { this.saveCheckAll = 'N' return true } }, userRoleIndeterminateList(){ return this.userRoleList.map(item=>{ if (item.checkAll === true){ return false }else { return !(item.searchCheck === false && item.updateCheck === false && item.downCheck === false && item.deleteCheck === false); } }) }, }, 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(type==2) { strVal = this.dataForm.finalCustomerId } } 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.tagNo1==2) { this.dataForm.finalCustomerId = val.Customer_no this.dataForm.finalCustomerName = 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 let requestCustomer = null; if (this.dataForm.customerId){ requestCustomer = JSON.parse(JSON.stringify(this.dataForm)) } 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 }) this.searchUserRoll(); } }) }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:'', finalCustomerId:'', finalCustomerName:'', } this.searchUserRoll(); }
if (requestCustomer){ this.initCustomer(requestCustomer) } this.visible = true }, searchUserRoll(val){ let arr = [] if (val === 'none'){// 判断是否走搜索的方法
arr =JSON.parse(JSON.stringify(this.userRoleList)); } let inData3={ site:this.dataForm.site, projectId:this.dataForm.projectId, username:this.userRoleForm.username, userDisplay:this.userRoleForm.userDisplay, } searchUserRoll(inData3).then(({data}) => { this.dataForm.userRoleList=data.rows; this.userRollModal(undefined,arr); }) }, 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(val,arr){ 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].checkAll=true; this.changeAll(this.userRoleList[i]) } } // 查询不刷新选择值
if (arr && arr.length > 0){ for (let i = 0; i < this.userRoleList.length; i++) { let row = arr[i] if (arr[i].username !== this.$store.state.user.name){ row = arr.find(item => item.username === arr[i].username) } this.$set(this.userRoleList, i, row) } } if (val === 'none'){ 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[i]=this.userRoleList[i].userDisplay } } this.dataForm.userRoleName=name.join(';') 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 () { this.$refs.saveForm.validate((validate)=>{ if (validate){ this.dataForm.updateBy = this.$store.state.user.name console.log(this.dataForm) 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) } }) }else { // if(!this.dataForm.projectTypeDb){
// this.$alert('请选择项目类型！', '错误', {
// confirmButtonText: '确定'
// })
// return false;
// }
if(!this.dataForm.customerId){ this.$alert('请选择直接客户！', '错误', { confirmButtonText: '确定' }) return false; } if(!this.dataForm.projectName){ this.$alert('请输入项目名称！', '错误', { confirmButtonText: '确定' }) return false; } // if(!this.dataForm.projectSource){
// this.$alert('请选择项目来源！', '错误', {
// confirmButtonText: '确定'
// })
// return false;
// }
// if(!this.dataForm.buDesc){
// this.$alert('请选择BU！', '错误', {
// confirmButtonText: '确定'
// })
// return false;
// }
// if(!this.dataForm.priority){
// this.$alert('请选择优先级！', '错误', {
// confirmButtonText: '确定'
// })
// return false;
// }
if(!this.dataForm.needDate){ this.$alert('请选择要求日期！', '错误', { confirmButtonText: '确定' }) return false; } if(!this.dataForm.projectManagerName){ this.$alert('请选择项目经理！', '错误', { confirmButtonText: '确定' }) return false; } if(!this.dataForm.projectOwnerName){ this.$alert('请选择项目负责人！', '错误', { confirmButtonText: '确定' }) return false; } if(!this.dataForm.userRoleName){ this.$alert('请选择权限！', '错误', { confirmButtonText: '确定' }) return false; } } }) }, closeSaveDialog(){ this.$refs.saveForm.resetFields(); }, updateDataForm(val){ this.dataForm.projectId = val; }, initCustomer(row){ this.dataForm.customerId = row.customerId; this.dataForm.customerName = row.customerName; }, changeSaveCheckAll(val){ for (let i = 0; i < this.userRoleList.length; i++) { let row = this.userRoleList[i] row.checkAll = (val === 'Y') this.changeAll(row) } }, getCustomerName(type){ if(type===1){ let params = { site:this.$store.state.user.site, customerNo:this.dataForm.customerId } queryCustomer(params).then(({data})=>{ if (data && data.code === 0 ) { if (data.rows && data.rows.length === 1){ this.dataForm.customerName = data.rows[0].customerDesc }else { this.dataForm.customerName = '' } }else { this.$message.warning(data.msg) } }).catch((error)=>{ this.$message.error(error) }) } if(type===2){ let params = { site:this.$store.state.user.site, customerNo:this.dataForm.finalCustomerId } queryCustomer(params).then(({data})=>{ if (data && data.code === 0 ) { if (data.rows && data.rows.length === 1){ this.dataForm.finalCustomerName = data.rows[0].customerDesc }else { this.dataForm.finalCustomerName = '' } }else { this.$message.warning(data.msg) } }).catch((error)=>{ this.$message.error(error) }) } }, }, }</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; }
.el-textarea .el-textarea__inner { padding: 0px 5px; height: auto; }
</style>
|
