项目管理

zhouwx

2024-11-18 a886764374c7ee326bd632110fc6f518c5343e52

 src/views/safetyReview/projectManage/components/chooseExpert.vue

@@ -1,12 +1,128 @@

<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
@@ -20,6 +136,33 @@
  }
}

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
});
@@ -27,5 +170,15 @@


<style scoped lang="scss">
.expertChoose{
  display: flex;
  flex-direction: column;
  .fTop{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
  }

}
</style>