herenshan112
6 days ago
10 changed files with 989 additions and 113 deletions
@ -0,0 +1,664 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-05-08 08:34:12 |
||||
|
@ 备注: 模拟任务 |
||||
|
--> |
||||
|
<script lang="ts" setup> |
||||
|
import { Check, Delete, Edit, Message, Search, Star } from "@element-plus/icons-vue"; |
||||
|
import { |
||||
|
haveCustomerFormVersion, |
||||
|
generateFlow, |
||||
|
echoTableFormPage, |
||||
|
realTimeUpdateFlow, |
||||
|
} from "@/api/taskapi/management"; |
||||
|
import { nodeFlow, conditionInfo, nodelPeoples } from "@/api/taskapi/types"; |
||||
|
import { |
||||
|
notAsA_BasisForJudgment, |
||||
|
asAnApprovalActionControl, |
||||
|
fixedValueControl, |
||||
|
timeControl, |
||||
|
timeEquation, |
||||
|
submitButton, |
||||
|
afreshSubmitButton, |
||||
|
} from "@/utils/workflow/const"; |
||||
|
import { judgeSubmitCancel, startRunFlow } from "@/api/DesignForm/requestapi"; |
||||
|
import { string2json, stringToObj } from "@/utils/DesignForm/form"; |
||||
|
import FlowStep from "@/views/taskplatform/taskmanagement/flowStep.vue"; |
||||
|
import { orgform, criteriaForPeopleList } from "@/api/hr/org/type"; |
||||
|
import { |
||||
|
getOrgFormTree, |
||||
|
getOrgFormUserList, |
||||
|
searchUserCustomerFormList, |
||||
|
} from "@/api/hr/org/index"; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
simuIsTrue: { |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
formVersion: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
}); |
||||
|
const squareUrl = "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"; |
||||
|
const emits = defineEmits(["update:simuIsTrue"]); |
||||
|
const isShow = computed({ |
||||
|
get: () => { |
||||
|
getTaskFormData(); |
||||
|
return props.simuIsTrue; |
||||
|
}, |
||||
|
set: (val) => { |
||||
|
emits("update:simuIsTrue", val); |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-08 15:35:54 |
||||
|
@ 功能: 表单基本数据结构 |
||||
|
*/ |
||||
|
const state = reactive<any>({ |
||||
|
type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计 |
||||
|
formData: { |
||||
|
list: [], |
||||
|
form: {}, |
||||
|
config: {}, |
||||
|
powerstr: {}, |
||||
|
}, |
||||
|
dict: {}, |
||||
|
formId: props.versionid, |
||||
|
id: 0, |
||||
|
loading: true, |
||||
|
}); |
||||
|
const nodelUserList = reactive<nodelPeoples[]>([]); |
||||
|
const flowFactor = reactive<conditionInfo[]>([]); //表单组件 |
||||
|
const formLoading = ref(false); //loading |
||||
|
const flowLoading = ref(false); //loading |
||||
|
const flowMap = ref<any[]>(); //工作流 |
||||
|
const nextStep = ref<number>(0); |
||||
|
const currentProgress = ref<number>(1); |
||||
|
const nodeKey = ref<string>(""); |
||||
|
//获取工作流条件 |
||||
|
const gainFlowChart = reactive<nodeFlow>({ |
||||
|
id: "0", |
||||
|
isRun: 1, |
||||
|
userKey: "", |
||||
|
}); |
||||
|
|
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-09 16:49:09 |
||||
|
@ 功能: 表单前置数据 |
||||
|
*/ |
||||
|
const beforeSubmit = (params: any) => { |
||||
|
params.formId = props.versionid; |
||||
|
params.id = ""; |
||||
|
// emits("update:isopen", false); |
||||
|
return params; |
||||
|
}; |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-09 16:41:20 |
||||
|
@ 功能: 提交成功回调 |
||||
|
*/ |
||||
|
const afterSubmit = (type: string, val?: any) => { |
||||
|
// console.log("表单提交成功------------------>",type,val) |
||||
|
// console.log("流程------------------>",flowMap) |
||||
|
if (type === "success") { |
||||
|
} |
||||
|
}; |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-09 16:50:01 |
||||
|
@ 功能: 关闭操作 |
||||
|
*/ |
||||
|
const closeAppSubmit = () => { |
||||
|
emits("update:simuIsTrue", false); |
||||
|
}; |
||||
|
//组件解析 |
||||
|
const changeKeyVal = (key: any, val: any, type: any, attribute: any) => { |
||||
|
// console.log("改变表单值--key--->",key) |
||||
|
// console.log("改变表单值--val--->",val,Array.isArray(val)) |
||||
|
// console.log("改变表单值--type--->",type) |
||||
|
// console.log("改变表单值--attribute--->",attribute) |
||||
|
|
||||
|
// console.log("改变表单值--type-1-true->",notAsA_BasisForJudgment.indexOf(type)) |
||||
|
|
||||
|
// console.log("改变表单值--flowFactor--->",flowFactor) |
||||
|
|
||||
|
// if(notAsA_BasisForJudgment.indexOf(type) != -1){ |
||||
|
// console.log("改变表单值--type--true->",notAsA_BasisForJudgment.indexOf(type)) |
||||
|
// } |
||||
|
let unitsVal = val; |
||||
|
let isUpdateFlowChart = false; |
||||
|
//单选，多选，下拉菜单 |
||||
|
if (notAsA_BasisForJudgment.indexOf(type) === -1) { |
||||
|
let isWrite = true; |
||||
|
flowFactor.forEach((item: any) => { |
||||
|
if (item.factorid == key) { |
||||
|
isWrite = false; |
||||
|
|
||||
|
item.type = 3; |
||||
|
if (type == "checkbox") { |
||||
|
item.isCheckbox = true; |
||||
|
item.answers = val.map(String); |
||||
|
} else { |
||||
|
item.isCheckbox = false; |
||||
|
item.oneanswer = val.toString(); |
||||
|
} |
||||
|
if (notAsA_BasisForJudgment.indexOf(type) === -1) { |
||||
|
isUpdateFlowChart = true; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
if (isWrite) { |
||||
|
if (type == "checkbox") { |
||||
|
flowFactor.push({ |
||||
|
factorid: key, |
||||
|
type: 3, |
||||
|
isCheckbox: true, |
||||
|
answers: val.map(String), |
||||
|
}); |
||||
|
} else { |
||||
|
flowFactor.push({ |
||||
|
factorid: key, |
||||
|
type: 3, |
||||
|
isCheckbox: false, |
||||
|
oneanswer: val.toString(), |
||||
|
}); |
||||
|
} |
||||
|
isUpdateFlowChart = true; |
||||
|
} |
||||
|
// console.log("改变表单值--flowFactor--->",flowFactor) |
||||
|
} |
||||
|
// console.log("改变表单值--flowFactor--1->",unitsVal,timeControl,type) |
||||
|
//时间类空间附加判断条件 |
||||
|
if ( |
||||
|
timeControl.indexOf(type) > -1 || |
||||
|
fixedValueControl.indexOf(type) > -1 || |
||||
|
type == "input" |
||||
|
) { |
||||
|
// console.log("改变表单值--flowFactor--3->",unitsVal) |
||||
|
let addNewTime = true; //判断是否新增 |
||||
|
flowFactor.forEach((item: any) => { |
||||
|
// console.log("改变表单值--flowFactor--5->",item.type) |
||||
|
if (item.type == 2) { |
||||
|
addNewTime = false; |
||||
|
// console.log("改变表单值--flowFactor--5====1->",item.type) |
||||
|
// console.log("改变表单值--flowFactor--5====3->",item.customFields,item.customFields.length) |
||||
|
if (item.customFields && item.customFields.length > 0) { |
||||
|
// console.log("改变表单值--flowFactor--5====2->",item.customFields) |
||||
|
let sunNewAdd = true; |
||||
|
item.customFields.forEach((sunItem: any) => { |
||||
|
// console.log("改变表单值--flowFactor-4->",sunItem.wordfield , key,sunItem.wordfield == key) |
||||
|
if (sunItem.wordfield == key) { |
||||
|
sunNewAdd = false; |
||||
|
isUpdateFlowChart = true; |
||||
|
if (timeEquation.indexOf(attribute) === -1) { |
||||
|
//非区间性时间 |
||||
|
sunItem.leftval = val.toString(); |
||||
|
} else { |
||||
|
//区间性时间 |
||||
|
if (Array.isArray(val)) { |
||||
|
if (val.length >= 2) { |
||||
|
sunItem.leftval = val[0].toString(); |
||||
|
sunItem.rightval = val[val.length - 1].toString(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
if (sunNewAdd) { |
||||
|
isUpdateFlowChart = true; |
||||
|
if (timeEquation.indexOf(attribute) === -1) { |
||||
|
//非区间性时间 |
||||
|
let customFieldInfo = { |
||||
|
wordfield: key, |
||||
|
optType: "1", |
||||
|
leftval: val.toString(), |
||||
|
}; |
||||
|
item.customFields.push(customFieldInfo); |
||||
|
} else { |
||||
|
//区间性时间 |
||||
|
if (Array.isArray(val)) { |
||||
|
if (val.length >= 2) { |
||||
|
let customFieldInfo = { |
||||
|
wordfield: key, |
||||
|
optType: "6", |
||||
|
leftval: val[0].toString(), |
||||
|
leftoptType: "3", |
||||
|
rightoptType: "3", |
||||
|
rightval: val[val.length - 1].toString(), |
||||
|
}; |
||||
|
item.customFields.push(customFieldInfo); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
if (addNewTime) { |
||||
|
//新增自定义类数据判断 |
||||
|
isUpdateFlowChart = true; |
||||
|
if (timeEquation.indexOf(attribute) === -1) { |
||||
|
//非区间性时间 |
||||
|
let customFieldInfo = { |
||||
|
wordfield: key, |
||||
|
optType: "1", |
||||
|
leftval: val.toString(), |
||||
|
}; |
||||
|
let condInfo = { |
||||
|
factorid: "customFields", |
||||
|
type: 2, |
||||
|
isCheckbox: false, |
||||
|
customFields: [customFieldInfo], |
||||
|
}; |
||||
|
flowFactor.push(condInfo); |
||||
|
} else { |
||||
|
//区间性时间 |
||||
|
if (Array.isArray(val)) { |
||||
|
if (val.length >= 2) { |
||||
|
let customFieldInfo = { |
||||
|
wordfield: key, |
||||
|
optType: "6", |
||||
|
leftval: val[0].toString(), |
||||
|
leftoptType: "3", |
||||
|
rightoptType: "3", |
||||
|
rightval: val[val.length - 1].toString(), |
||||
|
}; |
||||
|
let condInfo = { |
||||
|
factorid: "customFields", |
||||
|
type: 2, |
||||
|
isCheckbox: false, |
||||
|
customFields: [customFieldInfo], |
||||
|
}; |
||||
|
flowFactor.push(condInfo); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
//操作人 |
||||
|
if (asAnApprovalActionControl.indexOf(type) > -1) { |
||||
|
isUpdateFlowChart = true; |
||||
|
let isWriteUs = true; |
||||
|
nodelUserList.forEach((item: any) => { |
||||
|
if (item.factorid == key) { |
||||
|
isWriteUs = false; |
||||
|
item.userList = val; |
||||
|
} |
||||
|
}); |
||||
|
if (isWriteUs) { |
||||
|
nodelUserList.push({ |
||||
|
factorid: key, |
||||
|
userList: val, |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// console.log("改变表单值--flowFactor--->", isUpdateFlowChart); |
||||
|
let isTrue = false |
||||
|
if(changeFlowPick.value && Array.isArray(changeFlowPick.value) && changeFlowPick.value.includes(key)){ |
||||
|
isTrue = true |
||||
|
} |
||||
|
//更新工作流图 |
||||
|
if (isUpdateFlowChart && isTrue) { |
||||
|
flowLoading.value = true; |
||||
|
//获取工作流不进图 |
||||
|
gainFlowChart.conditionList = flowFactor; |
||||
|
gainFlowChart.nodelPeople = nodelUserList; |
||||
|
gainFlowChart.oldFlow = flowMap; |
||||
|
// console.log("获取工作流不进图--gainFlowChart--->",gainFlowChart) |
||||
|
realTimeUpdateFlow(gainFlowChart).then((data: any) => { |
||||
|
// console.log("获取工作流不进图-new-->",data) |
||||
|
flowMap.value = data.data.flowList; |
||||
|
nextStep.value = data.data.nextStep; |
||||
|
currentProgress.value = data.data.Step; |
||||
|
nodeKey.value = data.data.nodeKey; |
||||
|
// // console.log("获取工作流不进图-1-->",flowMap.value) |
||||
|
flowLoading.value = false; |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-09 16:50:37 |
||||
|
@ 功能: 保存草稿 |
||||
|
*/ |
||||
|
const saveDraftPage = (type: string, val?: any) => { |
||||
|
if (type === "success") { |
||||
|
} |
||||
|
}; |
||||
|
const changeFlowPick = ref<string[]>([]) |
||||
|
const isFlowTable = ref(false); //判断是不是流程表单 |
||||
|
//获取表单数据 |
||||
|
const getTaskFormData = () => { |
||||
|
formLoading.value = true; |
||||
|
flowLoading.value = true; |
||||
|
echoTableFormPage({ id: props.formVersion.toString() }) |
||||
|
.then(({ data }) => { |
||||
|
// console.log("表单数据",data) |
||||
|
if (data.tableFormPage.flowIsOpen == 1 && data.tableFormPage.flowkeystr != "0") { |
||||
|
isFlowTable.value = true; |
||||
|
} else { |
||||
|
isFlowTable.value = false; |
||||
|
} |
||||
|
changeFlowPick.value = data.channerUpdate |
||||
|
gainFlowChart.id = data.tableFormPage.flowkeystr; |
||||
|
console.log("表单数据--->1", data.flowPage.flowList); |
||||
|
flowMap.value = data.flowPage.flowList; |
||||
|
state.id = props.versionid; |
||||
|
state.formData = stringToObj(data.tableFormPage.mastesform); |
||||
|
state.formData.config.hideField = []; //暂时的修复方法:接口返回的config中没有hideField属性,手动添加 |
||||
|
|
||||
|
// console.log("tableFlow---echoTableFormPage---data.tableFormPage.mastesform",data.tableFormPage.mastesform) |
||||
|
state.dict = string2json(data.tableFormPage.dict); |
||||
|
|
||||
|
state.formData.powerstr = string2json(data.tableFormPage.powerstr); |
||||
|
// judgeSubmitCancel({ name: data.tableFormPage.mastesformjson }).then( |
||||
|
// (datajud: any) => { |
||||
|
// if (datajud.code == 0) { |
||||
|
// if (datajud.data == 3 || datajud.data == 4) { |
||||
|
// state.formData.list.push(submitButton); |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
// ); |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
formLoading.value = false; |
||||
|
flowLoading.value = false; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
/********************************************************** |
||||
|
* 关于选择发起人问题 * |
||||
|
* * |
||||
|
***********************************************************/ |
||||
|
const treeData = ref<orgform[]>([]); |
||||
|
const tableData = ref<criteriaForPeopleList[]>(); |
||||
|
const openManBox = ref(false); |
||||
|
const searchPeopel = reactive({ |
||||
|
orgId: 309, |
||||
|
title: "", |
||||
|
page: 1, |
||||
|
pageSize: 8, |
||||
|
total: 50, |
||||
|
}); |
||||
|
const defaultProps = { |
||||
|
children: "children", |
||||
|
label: "name", |
||||
|
}; |
||||
|
const pickSimMan = reactive({ |
||||
|
name: "", |
||||
|
num: "", |
||||
|
userKey: "", |
||||
|
icon: "", |
||||
|
}); |
||||
|
const loadPeople = ref(false); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-05-08 14:02:21 |
||||
|
@ 功能: 搜索人员 |
||||
|
*/ |
||||
|
const serachPeople = () => { |
||||
|
loadPeople.value = true; |
||||
|
const params = { |
||||
|
pageInfo: { |
||||
|
pageIndex: searchPeopel.page, |
||||
|
pageSize: searchPeopel.pageSize, |
||||
|
}, |
||||
|
name: searchPeopel.title, |
||||
|
department: searchPeopel.orgId, |
||||
|
}; |
||||
|
getOrgFormUserList(params) |
||||
|
.then(({ data }) => { |
||||
|
tableData.value = data.list; |
||||
|
searchPeopel.total = data.total; |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
loadPeople.value = false; |
||||
|
}); |
||||
|
}; |
||||
|
const searckButPick = () => { |
||||
|
searchPeopel.page = 1; |
||||
|
serachPeople(); |
||||
|
}; |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-05-08 10:59:08 |
||||
|
@ 功能: 打开发起人选择器 |
||||
|
*/ |
||||
|
const pickOnePeople = () => { |
||||
|
openManBox.value = true; |
||||
|
getTreeData(); |
||||
|
serachPeople(); |
||||
|
}; |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-05-08 11:34:32 |
||||
|
@ 功能: 关闭弹窗 |
||||
|
*/ |
||||
|
const handleClose = () => { |
||||
|
openManBox.value = false; |
||||
|
}; |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-05-08 13:52:50 |
||||
|
@ 功能: 翻页操作 |
||||
|
*/ |
||||
|
const fanyeSerace = (val: number) => { |
||||
|
searchPeopel.page = val; |
||||
|
serachPeople(); |
||||
|
}; |
||||
|
const getTreeData = () => { |
||||
|
// getRequest('deptList', {}).then((res: any) => { |
||||
|
// treeData.value = formatResult(res.data, 'transformDataToChild') |
||||
|
// }) |
||||
|
getOrgFormTree({ id: 309 }) |
||||
|
.then(({ data }) => { |
||||
|
// console.log(data) |
||||
|
treeData.value = data.list; |
||||
|
}) |
||||
|
.finally(() => {}); |
||||
|
}; |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-05-08 15:09:00 |
||||
|
@ 功能: 我选中的人 |
||||
|
*/ |
||||
|
const pickManInfo = (val: any) => { |
||||
|
console.log("我选中的人----------》", val); |
||||
|
gainFlowChart.isRun = 2; |
||||
|
gainFlowChart.userKey = val.userkey; |
||||
|
|
||||
|
pickSimMan.name = val.name; |
||||
|
pickSimMan.num = val.number; |
||||
|
pickSimMan.userKey = val.userkey; |
||||
|
pickSimMan.icon = val.icon |
||||
|
? val.icon |
||||
|
: val.icon_photo != null |
||||
|
? val.icon_photo |
||||
|
: squareUrl; |
||||
|
|
||||
|
realTimeUpdateFlow(gainFlowChart).then((data: any) => { |
||||
|
// console.log("获取工作流不进图-new-->",data) |
||||
|
flowMap.value = data.data.flowList; |
||||
|
nextStep.value = data.data.nextStep; |
||||
|
currentProgress.value = data.data.Step; |
||||
|
nodeKey.value = data.data.nodeKey; |
||||
|
// // console.log("获取工作流不进图-1-->",flowMap.value) |
||||
|
flowLoading.value = false; |
||||
|
}); |
||||
|
handleClose(); |
||||
|
}; |
||||
|
</script> |
||||
|
<template> |
||||
|
<div> |
||||
|
<el-drawer v-model="isShow" title="模拟测试流程" direction="rtl" size="900"> |
||||
|
<template #header="{ close, titleId, titleClass }"> |
||||
|
<h4 :id="titleId" :class="titleClass">模拟测试流程</h4> |
||||
|
<div> |
||||
|
<el-text v-if="pickSimMan.name != ''" |
||||
|
>当前执行人：{{ pickSimMan.name |
||||
|
}}<el-text v-if="pickSimMan.num != ''" |
||||
|
>（No.{{ pickSimMan.num }}）</el-text |
||||
|
></el-text |
||||
|
> |
||||
|
<el-button type="primary" size="small" @click="pickOnePeople" |
||||
|
>选择发起人</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div class="common-layout"> |
||||
|
<el-container> |
||||
|
<el-main |
||||
|
v-loading="formLoading" |
||||
|
class="asMain" |
||||
|
element-loading-text="Loading..." |
||||
|
> |
||||
|
<ak-form |
||||
|
ref="formEl" |
||||
|
:numrun="formType" |
||||
|
:form-data="state.formData" |
||||
|
:type="formType" |
||||
|
:dict="state.dict" |
||||
|
request-url="getFormContent" |
||||
|
add-url="saveFormContent" |
||||
|
edit-url="editFormContent" |
||||
|
:before-submit="beforeSubmit" |
||||
|
:after-submit="afterSubmit" |
||||
|
:close-app-submit="closeAppSubmit" |
||||
|
:change-key-val="changeKeyVal" |
||||
|
:save-draft-page="saveDraftPage" |
||||
|
/> |
||||
|
</el-main> |
||||
|
<el-aside |
||||
|
v-loading="flowLoading" |
||||
|
width="300px" |
||||
|
class="asBox" |
||||
|
element-loading-text="Loading..." |
||||
|
> |
||||
|
<el-text size="large">审批流程</el-text> |
||||
|
<FlowStep |
||||
|
v-model:flow-map="flowMap" |
||||
|
:next-step="nextStep" |
||||
|
:current-progress="currentProgress" |
||||
|
:node-key="nodeKey" |
||||
|
/> |
||||
|
</el-aside> |
||||
|
</el-container> |
||||
|
</div> |
||||
|
</el-drawer> |
||||
|
|
||||
|
<el-dialog |
||||
|
v-model="openManBox" |
||||
|
title="请选择流程发起人" |
||||
|
width="500" |
||||
|
:before-close="handleClose" |
||||
|
:overflow="true" |
||||
|
> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<el-row :gutter="5"> |
||||
|
<el-col :span="12"> |
||||
|
<el-tree-select |
||||
|
v-model="searchPeopel.orgId" |
||||
|
:data="treeData" |
||||
|
node-key="id" |
||||
|
:props="defaultProps" |
||||
|
highlight-current |
||||
|
check-strictly |
||||
|
clearable |
||||
|
@node-click="handleNodeClick" |
||||
|
/> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-input |
||||
|
v-model="searchPeopel.title" |
||||
|
placeholder="请输入姓名或工号" |
||||
|
clearable |
||||
|
/> |
||||
|
</el-col> |
||||
|
<el-col :span="4"> |
||||
|
<el-button type="primary" :icon="Search" @click="searckButPick" |
||||
|
>查询</el-button |
||||
|
> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-col> |
||||
|
<el-col :span="24"> |
||||
|
<el-scrollbar |
||||
|
v-loading="loadPeople" |
||||
|
height="400px" |
||||
|
element-loading-text="Loading..." |
||||
|
> |
||||
|
<div |
||||
|
v-for="item in tableData" |
||||
|
class="userListBox active" |
||||
|
@click="pickManInfo(item)" |
||||
|
> |
||||
|
<el-avatar |
||||
|
shape="square" |
||||
|
:size="40" |
||||
|
:src=" |
||||
|
item.icon != '' |
||||
|
? item.icon |
||||
|
: item.icon_photo != null |
||||
|
? item.icon_photo |
||||
|
: squareUrl |
||||
|
" |
||||
|
/> |
||||
|
<el-text class="userText">{{ item.name }}（{{ item.number }}）</el-text> |
||||
|
</div> |
||||
|
</el-scrollbar> |
||||
|
</el-col> |
||||
|
<el-col :span="24" class="footPage"> |
||||
|
<el-pagination |
||||
|
v-model:current-page="searchPeopel.page" |
||||
|
v-model:page-size="searchPeopel.pageSize" |
||||
|
size="small" |
||||
|
layout="prev, pager, next" |
||||
|
:total="searchPeopel.total" |
||||
|
@current-change="fanyeSerace" |
||||
|
/> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<!-- <template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="handleClose">取消</el-button> |
||||
|
<el-button type="primary" @click="handleClose">确定</el-button> |
||||
|
</div> |
||||
|
</template> --> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang="scss" scoped> |
||||
|
.asBox { |
||||
|
border-left: 1px solid #ececec; |
||||
|
height: calc(100vh - 60px); |
||||
|
padding: 0px 5px; |
||||
|
} |
||||
|
.userListBox { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
cursor: pointer; |
||||
|
width: 100%; |
||||
|
height: 40px; |
||||
|
margin: 10px 0px 0px 0px; |
||||
|
// border-bottom: 1px solid #ececec; |
||||
|
.userText { |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
} |
||||
|
.userListBox:hover { |
||||
|
background-color: #a0cfff; |
||||
|
} |
||||
|
.footPage { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue