|
|
@@ -0,0 +1,175 @@
|
|
|
+<template>
|
|
|
+ <div class="hc-related-project-box">
|
|
|
+ <div class="add-btn" @click="addFormList">
|
|
|
+ <i class="i-iconoir-plus" />
|
|
|
+ <span class="ml-[1px]">添加项目</span>
|
|
|
+ </div>
|
|
|
+ <div v-for="(item, index) in formList" :key="index" class="hc-form-list">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-select v-model="item.projectId" filterable block @change="projectChange($event, index)">
|
|
|
+ <el-option v-for="(items) in projectList" :key="items.id" :label="items.projectName" :value="items.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-select v-model="item.contractId" filterable block @change="contractChange($event, index)">
|
|
|
+ <template v-for="(items) in projectList[item.projectIndex]?.contractInfoList" :key="items.id">
|
|
|
+ <el-option :label="items.contractName" :value="items.id" />
|
|
|
+ </template>
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-select v-model="item.roleId" filterable block @change="roleChange($event, index)">
|
|
|
+ <el-option v-for="(items) in roleList" :key="items.id" :label="items.roleName" :value="items.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="2">
|
|
|
+ <el-button hc-btn type="danger" @click="delFormList(index)">删除</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { arrIndex, deepClone, getArrValue, isNullES } from 'js-fast-way'
|
|
|
+import { onMounted, ref } from 'vue'
|
|
|
+import mainApi from '~api/certificate/list'
|
|
|
+
|
|
|
+defineOptions({
|
|
|
+ name: 'HcRelatedProject',
|
|
|
+})
|
|
|
+
|
|
|
+//双向绑定
|
|
|
+// eslint-disable-next-line no-undef
|
|
|
+const queryValue = defineModel('modelValue', {
|
|
|
+ default: '',
|
|
|
+})
|
|
|
+
|
|
|
+//初始变量
|
|
|
+const formList = ref([])
|
|
|
+const formValue = ref([])
|
|
|
+
|
|
|
+//渲染完成
|
|
|
+onMounted(() => {
|
|
|
+ getDataApi()
|
|
|
+})
|
|
|
+
|
|
|
+const getDataApi = async () => {
|
|
|
+ await getProjectAndContract()
|
|
|
+ await getRoleData()
|
|
|
+ await setInitData()
|
|
|
+}
|
|
|
+
|
|
|
+//项目列表
|
|
|
+const projectList = ref([])
|
|
|
+const getProjectAndContract = async () => {
|
|
|
+ const { data } = await mainApi.queryProjectAndContract()
|
|
|
+ projectList.value = getArrValue(data)
|
|
|
+}
|
|
|
+
|
|
|
+//获取角色方
|
|
|
+const roleList = ref([])
|
|
|
+const getRoleData = async () => {
|
|
|
+ const { data } = await mainApi.queryRole()
|
|
|
+ roleList.value = getArrValue(data)
|
|
|
+}
|
|
|
+
|
|
|
+//添加项目
|
|
|
+const addFormList = () => {
|
|
|
+ formList.value.push({ projectId: '', projectIndex: -1, contractId: '', contractIndex: -1, roleId: '' })
|
|
|
+}
|
|
|
+
|
|
|
+//设置初始数据
|
|
|
+const setInitData = async () => {
|
|
|
+ const val = queryValue.value
|
|
|
+ if (isNullES(val)) return
|
|
|
+ const arr = val.split(','), project = projectList.value
|
|
|
+ let newFormArr = []
|
|
|
+ for (let i = 0; i < arr.length; i++) {
|
|
|
+ const items = arr[i].split('-')
|
|
|
+ const projectIndex = arrIndex(project, 'id', items[0])
|
|
|
+ const contractArr = getArrValue(project[projectIndex]?.contractInfoList)
|
|
|
+ const contractIndex = arrIndex(contractArr, 'id', items[1])
|
|
|
+ newFormArr.push({
|
|
|
+ projectId: items[0],
|
|
|
+ projectIndex: projectIndex,
|
|
|
+ contractId: items[1],
|
|
|
+ contractIndex: contractIndex,
|
|
|
+ roleId: items[2],
|
|
|
+ })
|
|
|
+ }
|
|
|
+ formList.value = newFormArr
|
|
|
+ formValue.value = arr
|
|
|
+}
|
|
|
+
|
|
|
+//项目选择
|
|
|
+const projectChange = (id, index) => {
|
|
|
+ const pindex = arrIndex(projectList.value, 'id', id)
|
|
|
+ formList.value[index].projectIndex = pindex ?? -1
|
|
|
+ formList.value[index].contractIndex = null
|
|
|
+ formList.value[index].contractId = null
|
|
|
+}
|
|
|
+
|
|
|
+//合同段选择
|
|
|
+const contractChange = (id, index) => {
|
|
|
+ const contractList = projectList.value[formList.value[index].projectIndex]?.contractInfoList ?? []
|
|
|
+ const cindex = arrIndex(contractList, 'id', id)
|
|
|
+ formList.value[index].contractIndex = cindex ?? -1
|
|
|
+}
|
|
|
+
|
|
|
+//角色被选择
|
|
|
+const roleChange = (id, index) => {
|
|
|
+ const form = deepClone(formList.value[index])
|
|
|
+ const testValue = `${form.projectId}-${form.contractId}-${id}`
|
|
|
+ const testIndex = formValue.value.indexOf(testValue)
|
|
|
+ if (testIndex === -1) {
|
|
|
+ formValue.value.push(testValue)
|
|
|
+ queryValue.value = formValue.value.join(',')
|
|
|
+ } else if (testIndex !== index) {
|
|
|
+ window.$message.error('关联的项目参见方不可重复')
|
|
|
+ formList.value[index].roleId = null
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//删除当前项目
|
|
|
+const delFormList = (index) => {
|
|
|
+ const list = deepClone(formList.value)
|
|
|
+ list.splice(index, 1)
|
|
|
+ formList.value = list
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.hc-related-project-box {
|
|
|
+ position: relative;
|
|
|
+ color: #606266;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 0 12px;
|
|
|
+ min-height: 32px;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #dddfe6;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
|
+ &:hover {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+ .add-btn {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ i {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add-btn + .hc-form-list {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .hc-form-list {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
