mkm/engineering_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
engineering_admin/src/views/project_pre_sales_members/edit.vue

558 lines
21 KiB
Vue
Raw Normal View History

页面修改
2023-11-14 18:56:09 +08:00
<template>
<div class="edit-popup">
<popup ref="popupRef" :title="popupTitle" :async="true" width="550px" @confirm="handleSubmit" @close="handleClose">
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
1.完成供应商库（供应商，供应商联系人）对接增删改查功能 2.项目管理（考勤记录，考勤明细）对接增删改查功能 3.完成项目合同、采购合同、收款管理、付款管理模块缺少字段对接
2023-12-26 18:24:54 +08:00
<el-form-item label="项目名称" prop="project_id" :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
<el-input v-model="project_name" @click="showDialog = true" clearable placeholder="点击选择项目" />
</el-form-item>
<el-form-item label="项目编码" prop="project_id" :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
<el-input v-model="project_code" disabled clearable placeholder="系统自动填写" />
</el-form-item>
<el-form-item label="客户名称" prop="project_id" :rules="[{ required: true, message: '不可为空', trigger: 'blur' }]">
<el-input v-model="custom_name" disabled @click="showDialog = true" clearable placeholder="系统自动填写" />
页面修改
2023-11-14 18:56:09 +08:00
</el-form-item>
<el-form-item label="技术人员" prop="technician_ids">
代码更新
2023-12-12 11:29:58 +08:00
<!-- <el-input v-model="technician" clearable placeholder="请输入技术人员" @click="userone('1')" /> -->
<!-- <el-input placeholder="请输入技术人员" v-model="technician" @click="userone('1')">
</el-input> -->
<el-button @click="userone('1')">添加</el-button>
<div style=" display: block;width: 100%;margin-top: 10px;">
<el-tag v-for="(tag, index) in technician" :key="index" closable @close="removeTag1(index)" style="margin-right: 10px;">
{{ tag.name }}
</el-tag>
</div>
页面修改
2023-11-14 18:56:09 +08:00
</el-form-item>
<el-form-item label="商务人员" prop="business_people_ids">
代码更新
2023-12-12 11:29:58 +08:00
<!-- <el-input v-model="business_people" clearable placeholder="请输入商务人员" @click="userone('2')" /> -->
<el-button @click="userone('2')">添加</el-button>
<div style=" display: block;width: 100%;margin-top: 10px;">
<el-tag v-for="(tag, index) in business_people" :key="index" closable @close="removeTag2(index)" style="margin-right: 10px;">
{{ tag.name }}
</el-tag>
</div>
页面修改
2023-11-14 18:56:09 +08:00
</el-form-item>
<el-form-item label="跨部门人员" prop="cross_departmental_personnel_ids">
代码更新
2023-12-12 11:29:58 +08:00
<!-- <el-input v-model="cross_departmental_personnel" clearable placeholder="请输入跨部门人员" @click="userone('3')" /> -->
<el-button @click="userone('3')">添加</el-button>
<div style=" display: block;width: 100%;margin-top: 10px;">
<el-tag v-for="(tag, index) in cross_departmental_personnel" :key="index" closable @close="removeTag3(index)" style="margin-right: 10px;">
{{ tag.name }}
</el-tag>
</div>
页面修改
2023-11-14 18:56:09 +08:00
</el-form-item>
更新商机管理 财务管理 项目管理功能
2023-12-14 09:37:31 +08:00
<el-dialog v-model="showDialog" title="选择项目" width="70%">
页面修改
2023-11-14 18:56:09 +08:00
<projectTable @customEvent="customEvent"></projectTable>
</el-dialog>
</el-form>
</popup>
代码更新
2023-12-12 11:29:58 +08:00
<el-dialog v-model="dialogVisible" title="人员选择器" width="600px" :before-close="handleClose">
<div>
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
<el-radio-button :label="1">全部人员</el-radio-button>
<el-radio-button :label="2">按部门筛选</el-radio-button>
<el-radio-button :label="3">按岗位筛选</el-radio-button>
</el-radio-group>
<div v-if="isCollapse == 1" style="margin-bottom: 20px">
<!-- <el-input v-model="content" clearable placeholder="搜索人员" /> -->
<div style="margin-top: 20px">
<el-checkbox-group v-model="radiolist">
<el-checkbox :label="item" v-for="(item, i) in uesrlist" :key="i" style="margin-bottom: 20px;">
<div class="radio-con">
<div class="radioa">
<img :src="item.avatar" alt="" />
</div>
<div class="radiob">
<div class="radiob_a">{{ item.name }}</div>
<div class="radiob_b">
<!-- {{ item.org_name }}/{{ item.dept_name }}/{{ item.job_name }} -->
<text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
<text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
<text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>
</div>
</div>
</div>
</el-checkbox><br />
</el-checkbox-group>
</div>
</div>
<div v-if="isCollapse == 2">
<div v-if="isshow">
<div class="lad" v-for="(item, i) in deparmetlist" :key="i">
<div class="lad">{{ i }}</div>
<div class="flex " v-for="(items, k) in item" style="justify-content: space-between;" @click="deparmetclck(items)">
<div>{{ items.name }}</div>
<div class="Collapsebj">{{ items.admin_num }}</div>
</div>
</div>
</div>
<div v-else>
<!-- <el-input v-model="content" clearable placeholder="搜索人员" style="margin-bottom: 20px;" /> -->
<el-checkbox-group v-model="radiolist">
<el-checkbox :label="item" v-for="(item, i) in deparmetlist1" :key="i" style="margin-bottom: 20px;">
<div class="radio-con">
<div class="radioa">
<img :src="item.avatar" alt="" />
</div>
<div class="radiob">
<div class="radiob_a">{{ item.name }}</div>
<div class="radiob_b">
<text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
<text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
<text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>
</div>
</div>
</div>
</el-checkbox><br />
</el-checkbox-group>
</div>
</div>
<div v-if="isCollapse == 3">
<div class="lad " v-if="isshow1">
<div class="flex " v-for="(item, j) in jobslist" :key="j" style="justify-content: space-between;" @click="gwclck(item)">
<div>{{ item.name }}</div>
<div class="Collapsebj">{{ item.admin_num }}</div>
</div>
</div>
<div v-else>
<!-- <el-input v-model="content" clearable placeholder="搜索人员" style="margin-bottom: 20px;" /> -->
<el-checkbox-group v-model="radiolist">
<el-checkbox :label="item" v-for="(item, i) in jobslist1" :key="i" style="margin-bottom: 20px;">
<div class="radio-con">
<div class="radioa">
<img :src="item.avatar" alt="" />
</div>
<div class="radiob">
<div class="radiob_a">{{ item.name }}</div>
<div class="radiob_b">
<!-- {{ item.org_name }}/{{ item.dept_name }}/{{ item.job_name }} -->
<text v-if="item.org_name.length > 0">{{ item.org_name }}</text>
<text v-if="item.dept_name.length > 0">/{{ item.dept_name }}</text>
<text v-if="item.job_name.length > 0">/{{ item.job_name }}</text>
</div>
</div>
</div>
</el-checkbox><br />
</el-checkbox-group>
</div>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="userclick"> {{ radiolist.length > 0 ? '已选' : '未选' }}
<text v-if="radiolist.length > 0">{{ radiolist.length }}</text></el-button>
</span>
</template>
</el-dialog>
页面修改
2023-11-14 18:56:09 +08:00
</div>
</template>
<script lang="ts" setup name="projectPreSalesMembersEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
更新商机管理 财务管理 项目管理功能
2023-12-14 09:37:31 +08:00
import projectTable from "@/components/project/index.vue"
import { computed, nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
页面修改
2023-11-14 18:56:09 +08:00
import { apiProjectPreSalesMembersAdd, apiProjectPreSalesMembersEdit, apiProjectPreSalesMembersDetail } from '@/api/project_pre_sales_members'
代码更新
2023-12-12 11:29:58 +08:00
import { getAdminsByAll, getAllDept, getAllJobs, getAdminsByDept, getAdminsByJob } from '@/api/common'
页面修改
2023-11-14 18:56:09 +08:00
import { timeFormat } from '@/utils/util'
代码更新
2023-12-12 11:29:58 +08:00
import feedback from '@/utils/feedback'
页面修改
2023-11-14 18:56:09 +08:00
import type { PropType } from 'vue'
代码更新
2023-12-12 11:29:58 +08:00
const leixin = ref('0')
页面修改
2023-11-14 18:56:09 +08:00
defineProps({
dictData: {
type: Object as PropType<Record<string, any[]>>,
default: () => ({})
}
})
代码更新
2023-12-12 11:29:58 +08:00
const dialogVisible = ref(false)
const active = ref(0);
const isCollapse = ref(1);
页面修改
2023-11-14 18:56:09 +08:00
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
代码更新
2023-12-12 11:29:58 +08:00
const uesrlist = reactive([])
const deparmetlist = reactive({})
const deparmetlist1 = reactive([])
const jobslist = reactive({})
const jobslist1 = reactive([])
const isshow = ref(true);
const isshow1 = ref(true);
const radiolist = ref([])
const cross_departmental_personnel = ref([])
const technician
= ref([])
const business_people
= ref([])
更新商机管理 财务管理 项目管理功能
2023-12-14 09:37:31 +08:00
1.完成供应商库（供应商，供应商联系人）对接增删改查功能 2.项目管理（考勤记录，考勤明细）对接增删改查功能 3.完成项目合同、采购合同、收款管理、付款管理模块缺少字段对接
2023-12-26 18:24:54 +08:00
const custom_name = ref('')
const project_name = ref('')
const project_code = ref('')
更新商机管理 财务管理 项目管理功能
2023-12-14 09:37:31 +08:00
页面修改
2023-11-14 18:56:09 +08:00
const showDialog = ref(false)
const customEvent = (e: any) => {
formData.project_id = e.id;
1.完成供应商库（供应商，供应商联系人）对接增删改查功能 2.项目管理（考勤记录，考勤明细）对接增删改查功能 3.完成项目合同、采购合同、收款管理、付款管理模块缺少字段对接
2023-12-26 18:24:54 +08:00
project_name.value = e.name;
project_code.value = e.project_code;
custom_name.value = e.custom_name;
页面修改
2023-11-14 18:56:09 +08:00
showDialog.value = false;
};
代码更新
2023-12-12 11:29:58 +08:00
// 获取全部人员
const getlist = () => {
getAdminsByAll().then((res) => {
更新商机管理 财务管理 项目管理功能
2023-12-14 09:37:31 +08:00
// console.log(res)
代码更新
2023-12-12 11:29:58 +08:00
Object.assign(uesrlist, res)
})
}
//获取所有部门
const deparmet = () => {
getAllDept().then((res) => {
console.log(res)
Object.assign(deparmetlist, res)
})
}
//获取部门下的人员
const deparmetclck = (item: { id: any }) => {
console.log(item)
getAdminsByDept({ 'dept_id': item.id }).then((res) => {
if (res.length > 0) {
Object.assign(deparmetlist1, res)
isshow.value = false
}
})
}
//获取岗位
const Jobs = () => {
getAllJobs().then((res) => {
console.log(res)
Object.assign(jobslist, res)
})
}
//获取岗位下的人员
const gwclck = (item: { id: any }) => {
getAdminsByJob({ 'job_id': item.id }).then((res) => {
if (res.length > 0) {
Object.assign(jobslist1, res)
isshow1.value = false
}
})
}
//打开弹窗
const userone = (e: any) => {
leixin.value = e
更新商机管理 财务管理 项目管理功能
2023-12-14 09:37:31 +08:00
if (mode.value != 'add') {
if (e == 1) {
const arry4 = [...technician.value]
radiolist.value = arry4
} else if (e == 2) {
const arry4 = [...business_people.value]
radiolist.value = arry4
} else {
const arry4 = [...cross_departmental_personnel.value]
radiolist.value = arry4
}
}
代码更新
2023-12-12 11:29:58 +08:00
dialogVisible.value = true
}
功能更新
2024-01-06 17:57:30 +08:00
代码更新
2023-12-12 11:29:58 +08:00
//获取选择的数据
const userclick = () => {
if (radiolist.value.length > 0) {
if (leixin.value === '1') {
// 如果 leixin 的值为 1，则执行这里的代码块
formData.technician_ids = radiolist.value.map((item) => item.id).toString()
材料设置模块功能
2024-01-04 18:07:12 +08:00
const newArray = radiolist.value.map((item) => item)
功能更新
2024-01-06 17:57:30 +08:00
// if (!technician.value.some(elem => newArray.some(newElem => elem === newElem.id))) {
// // 如果不存在，则将 newElem 添加到 cont 数组中
// technician.value.push(...newArray);
// }
newArray.forEach(newElem => {
if (!technician.value.some(elem => elem.id === newElem.id)) {
// 如果不存在，则将 newElem 添加到 newArray1 数组中
technician.value.push(newElem);
}
});
代码更新
2023-12-12 11:29:58 +08:00
} else if (leixin.value === '2') {
// 如果 leixin 的值为 2，则执行这里的代码块
formData.business_people_ids = radiolist.value.map((item) => item.id).toString()
材料设置模块功能
2024-01-04 18:07:12 +08:00
const newArray = radiolist.value.map((item) => item)
功能更新
2024-01-06 17:57:30 +08:00
newArray.forEach(newElem => {
if (!business_people.value.some(elem => elem.id === newElem.id)) {
// 如果不存在，则将 newElem 添加到 newArray1 数组中
business_people.value.push(newElem);
}
});
// if (!business_people.value.some(elem => newArray.some(newElem => JSON.stringify(elem.id) === JSON.stringify(newElem.id)))) {
// // 如果不存在，则将 newElem 添加到 cont 数组中
// business_people.value.push(...newArray);
// }
代码更新
2023-12-12 11:29:58 +08:00
} else {
// 如果 leixin 的值不是 1 或 2，则执行这里的代码块
formData.cross_departmental_personnel_ids = radiolist.value.map((item) => item.id).toString()
材料设置模块功能
2024-01-04 18:07:12 +08:00
const newArray = radiolist.value.map((item) => item)
功能更新
2024-01-06 17:57:30 +08:00
newArray.forEach(newElem => {
if (!cross_departmental_personnel.value.some(elem => elem.id === newElem.id)) {
// 如果不存在，则将 newElem 添加到 newArray1 数组中
cross_departmental_personnel.value.push(newElem);
}
});
// if (!cross_departmental_personnel.value.some(elem => newArray.some(newElem => JSON.stringify(elem.id) === JSON.stringify(newElem.id)))) {
// // 如果不存在，则将 newElem 添加到 cont 数组中
// cross_departmental_personnel.value.push(...newArray);
// }
代码更新
2023-12-12 11:29:58 +08:00
}
dialogVisible.value = false
radiolist.value = []
} else {
feedback.msgError('请重新选择')
}
}
//删除选择数据
const removeTag1 = (tag) => {
technician.value.splice(tag, 1)
if (technician.value.length > 0) {
formData.technician_ids = technician.value.map((item) => item.id).toString()
}
}
const removeTag2 = (tag) => {
business_people.value.splice(tag, 1)
if (business_people.value.length > 0) {
formData.business_people_ids = business_people.value.map((item) => item.id).toString()
}
}
const removeTag3 = (tag) => {
cross_departmental_personnel.value.splice(tag, 1)
if (cross_departmental_personnel.value.length > 0) {
formData.cross_departmental_personnel_ids = cross_departmental_personnel.value.map((item) => item.id).toString()
}
}
页面修改
2023-11-14 18:56:09 +08:00
// 弹窗标题
const popupTitle = computed(() => {
return mode.value == 'edit' ? '编辑售前项目成员' : '新增售前项目成员'
})
// 表单数据
const formData = reactive({
id: '',
project_id: '',
technician_ids: '',
business_people_ids: '',
cross_departmental_personnel_ids: '',
})
// 表单验证
const formRules = reactive<any>({
})
完成资产管理以及订单管理前端页面 ，对接售后工单处理功能
2024-01-03 17:05:18 +08:00
页面修改
2023-11-14 18:56:09 +08:00
// 获取详情
const setFormData = async (data: Record<any, any>) => {
完成资产管理以及订单管理前端页面 ，对接售后工单处理功能
2024-01-03 17:05:18 +08:00
更新商机管理 财务管理 项目管理功能
2023-12-14 09:37:31 +08:00
setTimeout(() => {
if (data.technician_ids && data.technician_ids.length > 0) {
if (data.technician_ids.includes(",")) {
const arry1 = data.technician_ids.split(',')
const arry2 = uesrlist
const arry3 = arry2.filter(obj => arry1.includes(obj.id.toString()))
technician.value = arry3
} else {
const arry1 = [data.technician_ids]
const arry2 = uesrlist
const arry3 = arry2.filter(obj => arry1.includes(obj.id.toString()))
technician.value = arry3
}
}
if (data.business_people_ids && data.business_people_ids.length > 0) {
if (data.business_people_ids.includes(",")) {
const arry1 = data.business_people_ids.split(',')
const arry2 = uesrlist
const arry3 = arry2.filter(obj => arry1.includes(obj.id.toString()))
business_people.value = arry3
} else {
const arry1 = [data.business_people_ids]
const arry2 = uesrlist
const arry3 = arry2.filter(obj => arry1.includes(obj.id.toString()))
business_people.value = arry3
}
}
if (data.cross_departmental_personnel_ids && data.cross_departmental_personnel_ids.length > 0) {
if (data.cross_departmental_personnel_ids.includes(",")) {
const arry1 = data.cross_departmental_personnel_ids.split(',')
const arry2 = uesrlist
const arry3 = arry2.filter(obj => arry1.includes(obj.id.toString()))
cross_departmental_personnel.value = arry3
} else {
const arry1 = [data.cross_departmental_personnel_ids]
const arry2 = uesrlist
const arry3 = arry2.filter(obj => arry1.includes(obj.id.toString()))
cross_departmental_personnel.value = arry3
}
}
// const arry4 = [...cross_departmental_personnel.value, ...business_people.value, ...technician.value]
// radiolist.value = arry4
},
1000)
// technician.value = data.technician
// business_people.value = data.business_people
// cross_departmental_personnel.value = data.cross_departmental_personnel
页面修改
2023-11-14 18:56:09 +08:00
for (const key in formData) {
if (data[key] != null && data[key] != undefined) {
//@ts-ignore
formData[key] = data[key]
}
}
商机模块更新
2024-01-04 11:36:48 +08:00
project_name.value = data.project_name;
project_code.value = data.project_code;
custom_name.value = data.custom_name;
页面修改
2023-11-14 18:56:09 +08:00
}
const getDetail = async (row: Record<string, any>) => {
const data = await apiProjectPreSalesMembersDetail({
id: row.id
})
setFormData(data)
}
// 提交按钮
const handleSubmit = async () => {
await formRef.value?.validate()
const data = { ...formData, }
mode.value == 'edit'
? await apiProjectPreSalesMembersEdit(data)
: await apiProjectPreSalesMembersAdd(data)
popupRef.value?.close()
emit('success')
}
//打开弹窗
const open = (type = 'add') => {
完成资产管理以及订单管理前端页面 ，对接售后工单处理功能
2024-01-03 17:05:18 +08:00
getlist()
deparmet()
Jobs()
页面修改
2023-11-14 18:56:09 +08:00
mode.value = type
popupRef.value?.open()
}
// 关闭回调
const handleClose = () => {
emit('close')
}
更新商机管理 财务管理 项目管理功能
2023-12-14 09:37:31 +08:00
页面修改
2023-11-14 18:56:09 +08:00
defineExpose({
open,
setFormData,
getDetail
})
</script>
代码更新
2023-12-12 11:29:58 +08:00
<style lang="scss">
.userlist {
display: flex;
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
text-align: center;
.userlist-con {
margin-right: 10px;
}
}
.user {
img {
width: 40px;
height: 40px;
border-radius: 50%;
}
}
.radio-con {
display: flex;
width: 500px;
.radioa {
img {
margin-right: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
}
}
.radiob {
.radiob_a {
margin-bottom: 10px;
margin-top: 3px;
}
.radiob_b {}
}
}
.lad {
padding: 10px 0;
border-bottom: 1px solid #f7f7f7;
div {
margin: 10px 0;
}
.Collapsebj {
background-color: #3e8ef7;
height: 20px;
width: 20px;
line-height: 20px;
text-align: center;
border-radius: 6px;
color: #f7f7f7;
}
}
</style>
Reference in New Issue Copy Permalink