369 lines
12 KiB
Vue
369 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<el-card>
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
<el-tab-pane label="处理意见" name="first" class="demo-tabs-a">
|
|
<div>当前步骤： 发起工单</div>
|
|
<div>处理动作： 发起流程</div>
|
|
<div>送审步骤： 技术处理</div>
|
|
<div class="userlist">
|
|
<div>指定处理人：</div>
|
|
<div v-for="item in userlist1" class="userlist-con">
|
|
<img src="@/assets/images/no_perms.png" alt="" />
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
<el-form-item label="处理意见" prop="content">
|
|
<el-input v-model="content" class="w-[1280px]" clearable placeholder="请输入处理意见" type="textarea" />
|
|
</el-form-item>
|
|
|
|
<div class="flex user">
|
|
<div>流程抄送：</div>
|
|
<div>{{ userlist1.length }}人</div>
|
|
<div @click="dialogVisible = true"><img src="@/assets/images/no_perms.png" alt="" /></div>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="流程日志" name="second">暂无流程日志！</el-tab-pane>
|
|
</el-tabs>
|
|
</el-card>
|
|
|
|
<el-dialog v-model="dialogVisible" title="人员选择器" width="30%" :before-close="handleClose">
|
|
<div>
|
|
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px" @change="clckuser">
|
|
<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="vallist">
|
|
|
|
<div v-for="(item, i) in uesrlist" :key="i" class="radiolist">
|
|
<el-checkbox :label="item">
|
|
<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>
|
|
</div>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</div>
|
|
<div v-if="isCollapse == 2">
|
|
<div v-if="isshow">
|
|
<div v-for="(item, i) in deparmetlist" :key="i">
|
|
<div class="lad">{{ i }}</div>
|
|
<div class="lads">
|
|
<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>
|
|
<div v-else>
|
|
|
|
|
|
<!-- <el-input v-model="content" clearable placeholder="搜索人员" style="margin-bottom: 20px;" /> -->
|
|
|
|
<el-checkbox-group v-model="vallist">
|
|
<div v-for="(item, i) in deparmetlist1" :key="i" class="radiolist">
|
|
<el-checkbox :label="item">
|
|
<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>
|
|
</div>
|
|
</el-checkbox-group>
|
|
</div>
|
|
|
|
</div>
|
|
<div v-if="isCollapse == 3">
|
|
<div v-if="isshow1">
|
|
<div class="lads ">
|
|
<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>
|
|
<div v-else>
|
|
<!-- <el-input v-model="content" clearable placeholder="搜索人员" style="margin-bottom: 20px;" /> -->
|
|
|
|
<el-checkbox-group v-model="vallist">
|
|
|
|
<div v-for="(item, i) in jobslist1" :key="i" class="radiolist">
|
|
<el-checkbox :label="item">
|
|
<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>
|
|
</div>
|
|
</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"> {{ vallist.length > 0 ? '已选' : '未选' }}
|
|
<text v-if="vallist.length > 0">{{ vallist.length }}</text> </el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { computed, nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
|
|
import { getAdminsByAll, getAllDept, getAllJobs, getAdminsByDept, getAdminsByJob } from '@/api/common'
|
|
const active = ref(0);
|
|
|
|
const isCollapse = ref(1);
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array
|
|
}
|
|
})
|
|
console.log(props.list)
|
|
// const list = reactive([])
|
|
// list.splice(0, list.length, ...props.list)
|
|
const activeName = ref('first')
|
|
const content = ref('')
|
|
const userlist1 = reactive([{ name: 1 }, { name: 1 }, { name: 1 }, { name: 1 }]);
|
|
|
|
const uesrlist = reactive([]);
|
|
const deparmetlist = reactive({})
|
|
const deparmetlist1 = reactive([])
|
|
const jobslist = reactive({})
|
|
const jobslist1 = reactive([])
|
|
const isshow = ref(true);
|
|
const isshow1 = ref(true);
|
|
const vallist = ref([])
|
|
const companylist = reactive([
|
|
{
|
|
name1: "哈哈公司",
|
|
name2: "2222",
|
|
},
|
|
{
|
|
name1: "哈哈公司",
|
|
name2: "2222",
|
|
},
|
|
{
|
|
name1: "哈哈公司",
|
|
name2: "2222",
|
|
},
|
|
]);
|
|
const next = () => {
|
|
if (active.value++ > 2) active.value = 0;
|
|
};
|
|
|
|
//人员选择器切换点击
|
|
const clckuser = (e) => {
|
|
|
|
isshow.value = true
|
|
isshow1.value = true
|
|
}
|
|
|
|
//获取选择的数据
|
|
const userclick = () => {
|
|
dialogVisible.value = false
|
|
// console.log(vallist.value, 9999999999999)
|
|
userlist1.forEach((user, index) => {
|
|
Object.assign(user, vallist.value);
|
|
});
|
|
|
|
}
|
|
// 获取全部人员
|
|
const getlist = () => {
|
|
getAdminsByAll().then((res) => {
|
|
// console.log(res)
|
|
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
|
|
}
|
|
|
|
})
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
getlist()
|
|
deparmet()
|
|
Jobs()
|
|
})
|
|
|
|
const dialogVisible = ref(false);
|
|
const handleClose = (done: () => void) => {
|
|
done();
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-main {
|
|
background-color: #fff !important;
|
|
}
|
|
|
|
.demo-tabs-a {
|
|
div {
|
|
margin: 10px 0;
|
|
}
|
|
}
|
|
|
|
.radiolist {
|
|
height: 50px;
|
|
// border: 1px solid red;
|
|
margin-bottom: 5px;
|
|
|
|
.radio-con {
|
|
display: flex;
|
|
|
|
width: 500px;
|
|
|
|
.radioa {
|
|
display: flex;
|
|
justify-items: center;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
}
|
|
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.lads {
|
|
padding: 10px 0;
|
|
|
|
|
|
div {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.Collapsebj {
|
|
background-color: #3e8ef7;
|
|
height: 20px;
|
|
width: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
color: #f7f7f7;
|
|
}
|
|
}
|
|
</style> |