| | |
| | | |
| | | <template> |
| | | <div>专家选用</div> |
| | | <div class="expertChoose"> |
| | | <div style="margin-bottom: 50px"> |
| | | <div class="fTop"> |
| | | <span style="font-weight: 600">固定选用部分</span> |
| | | <el-button type="primary" style="width: 100px" @click="chooseExpert('选取专家')">选取专家</el-button> |
| | | </div> |
| | | <el-table v-loading="fLoading" :data="fixedDataList" :border="true" ref="fTableRef" style="width: 100%;"> |
| | | <el-table-column label="姓名" prop="name" align="center" /> |
| | | <el-table-column label="性别" prop="sex" align="center" > |
| | | <template #default="scope"> |
| | | {{scope.row.sex === 0 ? '男' : '女' }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="身份证号" prop="idCard" align="center" /> |
| | | <el-table-column label="等级" prop="level" align="center" /> |
| | | <el-table-column label="专业领域" prop="domain" align="center" /> |
| | | <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="180"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" @click="delF(scope.row)" >删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <div style="display: flex;flex-direction: column"> |
| | | <span style="font-weight: 600">随机选用部分</span> |
| | | <el-form :model="queryParams" ref="queryForm" :inline="true" style="margin-top: 10px" label-width="90px"> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="8"> |
| | | <el-form-item label="专业领域:"> |
| | | <el-cascader |
| | | style="width: 100%" |
| | | v-model="expertType" |
| | | :options="domainList" |
| | | :props="{ expandTrigger: 'hover',value: 'id',label: 'classifyName',multiple: true }" |
| | | @change="professionChange" |
| | | collapse-tags |
| | | collapse-tags-tooltip |
| | | clearable |
| | | > |
| | | </el-cascader> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item label="允许级别:"> |
| | | <el-checkbox-group v-model="checkList"> |
| | | <el-checkbox label="一级" value="一级" /> |
| | | <el-checkbox label="二级" value="二级" /> |
| | | <el-checkbox label="三级" value="三级" /> |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="8"> |
| | | <el-form-item style="float: right;"> |
| | | <el-button style="width: 100px;margin-right: -32px;" type="primary" @click="random">随机抽取</el-button> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="24"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="拟选用人数:"> |
| | | <el-input |
| | | v-model.trim="queryParams.num" |
| | | placeholder="请输入拟选用人数" |
| | | @input="queryParams.num = queryParams.num.replace(/[^0-9]/g,' ')" |
| | | > |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | <el-table v-loading="rLoading" :data="randomDataList" :border="true" ref="rTableRef" style="width: 100%;"> |
| | | <el-table-column label="姓名" prop="name" align="center" /> |
| | | <el-table-column label="性别" prop="sex" align="center" > |
| | | <template #default="scope"> |
| | | {{scope.row.sex === 0 ? '男' : '女' }} |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="身份证号" prop="idCard" align="center" /> |
| | | <el-table-column label="等级" prop="level" align="center" /> |
| | | <el-table-column label="专业领域" prop="domain" align="center" /> |
| | | <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="180"> |
| | | <template #default="scope"> |
| | | <el-button link type="primary" @click="delF(scope.row)" >删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <experts-list ref="expertsListRef" @getName="getSelected"></experts-list> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {onMounted, ref} from "vue"; |
| | | import expertsList from './expertsList.vue' |
| | | import {getExpertTypes} from "@/api/form"; |
| | | import {ElMessage} from "element-plus"; |
| | | |
| | | const emit = defineEmits(["getNextStatus"]); |
| | | const fTableRef = ref(null); |
| | | const expertsListRef = ref(null) |
| | | const fLoading = ref(false); |
| | | const rLoading = ref(false); |
| | | const fixedDataList = ref([]); |
| | | const rTableRef = ref(null); |
| | | const randomDataList = ref([]); |
| | | const queryParams = ref({ |
| | | |
| | | }) |
| | | const expertType = ref([]) |
| | | const checkList = ref([]) |
| | | const domainList = ref([]) |
| | | |
| | | onMounted(() =>{ |
| | | getDomain() |
| | | }) |
| | | const riskOpen = async (type,val) => { |
| | | console.log("type",type,val) |
| | | if(type === 'add' || type === 'clickEdit'){ |
| | | if(fixedDataList.value.length === 0 && randomDataList.value.length === 0){ |
| | | ElMessage.warning('请选择专家') |
| | | return; |
| | | } |
| | | } |
| | | |
| | | //保存按钮 |
| | | if(type === 'add'){ |
| | | //成功后自动到下一步 项目id |
| | |
| | | } |
| | | } |
| | | |
| | | const chooseExpert = (type) => { |
| | | expertsListRef.value.openDialog(type,fixedDataList.value) |
| | | } |
| | | const getSelected = (type,data)=>{ |
| | | fixedDataList.value = JSON.parse(JSON.stringify(data)) |
| | | } |
| | | const delF = (val) => { |
| | | fixedDataList.value = fixedDataList.value.filter(item => item.id != val.id) |
| | | } |
| | | |
| | | const professionChange=(value)=> { |
| | | console.log(value,'val') |
| | | } |
| | | const getDomain = async () => { |
| | | // const res = await getExpertTypes() |
| | | // if(res.code == 200){ |
| | | // domainList.value = res.data |
| | | // }else{ |
| | | // ElMessage.warning(res.message) |
| | | // } |
| | | } |
| | | |
| | | const random = () => { |
| | | rLoading.value = true |
| | | rLoading.value = false |
| | | } |
| | | |
| | | defineExpose({ |
| | | riskOpen |
| | | }); |
| | |
| | | |
| | | |
| | | <style scoped lang="scss"> |
| | | .expertChoose{ |
| | | display: flex; |
| | | flex-direction: column; |
| | | .fTop{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 15px; |
| | | } |
| | | |
| | | } |
| | | </style> |