TEAMModelOS/TEAMModelBI/ClientApp/src/view/systemConfig/correlation.vue

<template>
  <div class="correlationbox">
    <div class="nowuser">
      <p class="correlationbox-title">当前操作用户:</p>
      <div class="userlist">
        <div class="photobox">
          <PersonalPhoto style="cursor: pointer;" :name="nowUsers.name" width="40px" height="40px" fontSize="12px" class="pigpicture" v-if="!nowUsers.picture"></PersonalPhoto>
          <el-image style="width: 50px; height: 50px;border-radius:50%" :src="nowUsers.picture" fit="fill" v-else></el-image>
        </div>
        <div class="userlist-name">{{nowUsers.name}}({{nowUsers.mobile}})</div>
      </div>
    </div>
    <div class="school-list-header">
      <div class="correlationbox-titles">目前用户所关联学校：<span>关联数量：<span class="correlationbox-num">{{nowUsers.handleSchools.length}}</span></span></div>
      <div class="correlationbox-btn">
        <el-button type="primary" size="small" v-if="removeBatchschool.length >0 && PowerShow && adminOrleader===false" @click="multipeRemove"> 移除选中学校</el-button>
        <el-button type="primary" size="small" v-else-if="removeBatchschool.length ===0 && PowerShow && adminOrleader===true" disabled>移除选中学校</el-button>
      </div>
    </div>
    <!-- <p class="correlationbox-title">目前用户所关联学校：</p>
    <div class="correlationbox-btn">
      <el-button type="primary" size="small" v-if="multipleSchool.length >0 && PowerShow" @click="multipleCorrelation">关联选中学校</el-button>
      <el-button type="primary" size="small" v-else-if="multipleSchool.length ===0 && PowerShow" disabled>关联选中学校</el-button>
    </div> -->
    <div class="possessbox">
      <el-table :data="nowUsers.handleSchools" style="width: 100%" height="20vh" size="small" @selection-change="removeBatch" v-loading="loadingData.possess" element-loading-text="数据加载中..." empty-text='暂无相关数据'>
        <el-table-column type="selection" v-if="PowerShow" />
        <el-table-column label="校徽" align="center">
          <template #default="scope">
            <el-image style="width: 40px; height: 40px;" :src="scope.row.picture" fit="fill" v-if="scope.row.picture"></el-image>
            <div class="notimage" v-else>暂无<br />图片</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center" />
        <el-table-column prop="id" label="学校简码" align="center" />
        <!-- <el-table-column prop="name" label="版本" />
                <el-table-column prop="name" label="目前顾问" /> -->
        <el-table-column align="center">
          <template #header>
            <el-select v-model="areaList.existValue" placeholder="Select" size="small" @change="correlaSchool">
              <el-option v-for="item in areaList.data" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
          <template #default="scope">
            <!-- <span class="areaitem-name">{{scope.row.areaName}}</span><span class="areaitem-insti">({{scope.row.institution}})</span> -->
            <span class="areaitem-name">{{scope.row.areaName}}</span>
            <span class="areaitem-insti" v-if="scope.row.institution">({{scope.row.institution}})</span>
            <span class="areaitem-insti" v-else>{{scope.row.institution}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width='80' align="center" v-if="PowerShow && adminOrleader===false">
          <template #default="scope">
            <el-button type="text" size="small" @click="removeSchool(scope.row,scope.$index)">取消关联</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="nodata" v-else-if="nowUsers.handleSchools.length ===0">
      <div>暂无关联学校</div>
    </div> -->
    <div class="school-list">
      <div class="school-list-header">
        <div class="correlationbox-titles">学校列表：</div>
        <div class="correlationbox-search">
          <el-input v-model="schoolSearch" placeholder="输入学校名称/简码 搜索" :prefix-icon="Search" size="small" clearable />
        </div>
        <div class="correlationbox-btn">
          <el-button type="primary" size="small" v-if="multipleSchool.length >0 && PowerShow && adminOrleader===false" @click="multipleCorrelation">关联选中学校</el-button>
          <el-button type="primary" size="small" v-else-if="multipleSchool.length ===0 && PowerShow && adminOrleader===true" disabled>关联选中学校</el-button>
        </div>
      </div>
      <div class="listbox">
        <el-table :data="tableData" id="schoolList" style="width: 100%" height="45vh" size="small" @selection-change="checkSchool" empty-text='暂无相关搜索数据' v-loading="loadingData.list" element-loading-text="数据加载中...">
          <el-table-column type="selection" v-if="PowerShow" />
          <el-table-column label="校徽" align="center">
            <template #default="scope">
              <el-image style="width: 40px; height: 40px;" :src="scope.row.picture" fit="fill" v-if="scope.row.picture"></el-image>
              <div class="notimage" v-else>暂无<br />图片</div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" align="center" />
          <el-table-column prop="id" label="学校简码" align="center" />
          <!-- <el-table-column prop="name" label="版本" /> -->
          <el-table-column prop="assisName" label="目前顾问" align="center" />
          <el-table-column align="center">
            <template #header>
              <el-select v-model="areaList.value" placeholder="Select" size="small" @change="getAreaschool">
                <el-option v-for="item in areaList.data" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </template>
            <template #default="scope">
              <span class="areaitem-name">{{scope.row.areaName}}</span>
              <span class="areaitem-insti" v-if="scope.row.institution">({{scope.row.institution}})</span>
              <span class="areaitem-insti" v-else>{{scope.row.institution}}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width='80' align="center" v-if="PowerShow && adminOrleader===false">
            <template #default="scope">
              <el-button type="text" size="small" @click="correlation(scope.row,tableData)">关联学校</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, getCurrentInstance, watch, onMounted } from 'vue'
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons'
import { useStore } from 'vuex'
export default {
  props: {
    userdata: {
      type: Object,
      default: () => { },
    },
    areadata: {
      type: Object,
      default: () => [],
    }
  },
  components: {
    Search
  },
  setup (props, context) {
    let { proxy } = getCurrentInstance()
    const store = useStore()
    let PowerShow = proxy.$access.identifyPosition(JSON.parse(localStorage.getItem('id_token')))
    const tableDatas = ref([])
    let tableData = ref([])
    let nowUsers = ref()
    let multipleSchool = ref([])
    let removeBatchschool = ref([])
    let schoolSearch = ref('')
    let original = ref([])
    let timer = ref('')
    let nextpageToken = ref('')
    let scrollHeight = ref('init')
    let loadingData = ref({
      possess: true,
      list: false,
    })
    let areaList = ref({
      existValue: 'all',
      value: 'all',
      data: [
        { value: 'all', label: '全部', situate: 'all' },
      ]
    })
    //关联筛选原始data
    let correlaData = ref([])
    let adminOrleader = ref(false)
    onMounted(() => {
      //监听表格滚动事件
      // let table = mutipleTable.value._value.layout.table.refs.bodyWrapper;
      let table = document.getElementById('schoolList')
      console.log(table, '查看是否获取到')
      table.addEventListener("scroll", (res) => { loadmore(res) }, true);
    })
    const loadmore = (res) => {
      // console.log(res, res.target.scrollHeight, res.target.scrollTop + res.target.clientHeight, '实际高度')
      if (res.target.scrollTop && ((res.target.scrollHeight - 10) <= (res.target.scrollTop + res.target.clientHeight))) {
        scrollHeight.value = (res.target.scrollHeight - 10) - (res.target.scrollTop + res.target.clientHeight)
        console.log(scrollHeight.value, '值')
      }
    }
    function getSchoolList (value, state) {
      console.log(value, nextpageToken.value, '触发下一页')
      if ((nextpageToken.value === null) && state !== 'restart') {
        ElMessage.success('已经到最底了')
        return
      }
      loadingData.value.list = true
      let data = value ? { contToken: value } : {}
      proxy.$api
        .getSchooldata(data)
        .then((res) => {
          console.log(res, '学校的返回列表')
          // res.state === 200 ? (tableData.value = res.schoolAssists) : ''
          if (res.state === 200) {
            for (let i in res.schoolAssists) {
              if (res.schoolAssists[i].assists) {
                res.schoolAssists[i].assisName = ''
                let datas = res.schoolAssists[i].assists
                for (let y in datas) {
                  res.schoolAssists[i].assisName = res.schoolAssists[i].assisName + datas[y].tmdName + ','
                }
              }
            }
            nextpageToken.value = res.continuationToken
            //处理学区呈现
            console.log(areaList.value.data, '是否有数据')
            for (let y in res.schoolAssists) {
              let areaValue = res.schoolAssists[y].areaId
              console.log(areaValue, '学区的值')
              res.schoolAssists[y].areaName = ''
              res.schoolAssists[y].institution = ''
              for (let i in areaList.value.data) {
                areaValue === areaList.value.data[i].value ? (res.schoolAssists[y].areaName = areaList.value.data[i].label, res.schoolAssists[y].institution = areaList.value.data[i].situate) : ''
              }
            }
            console.log(res.schoolAssists, '是否有数据')
            if (!value) {
              tableData.value = res.schoolAssists;
              original.value = JSON.parse(JSON.stringify(res.schoolAssists));
            } else {
              tableData.value.push(...res.schoolAssists)
              // original.value = tableData.value
              scrollHeight.value = 'init'
            }
            processingSchool()
          }
        })
        .catch((err) => {
          ElMessage.error('获取学校列表失败')
        })
    }
    function correlation (value, data) {
      console.log(value, data)
      ElMessageBox.confirm(`请问您确定将 ${nowUsers.value.name} 设为 ${value.name} 顾问，进行数据关联吗 ？`, '关联学校', {
        confirmButtonText: proxy.$t(`commonMsg.confirm`),
        cancelButtonText: proxy.$t(`commonMsg.closes`),
        type: 'success',
        center: true,
      }).then(() => {
        let schoolArr = [value.id]
        let roles = nowUsers.value.handleRoles[0] === 'sales' ? 'sales' : nowUsers.value.handleRoles[0] === 'assist' ? 'assist' : nowUsers.value.handleRoles[0] === 'admin' || nowUsers.value.handleRoles[0] === 'leader' ? '' : ''
        let data = { partitionKey: nowUsers.value.partitionKey, userId: nowUsers.value.userId, tmdId: nowUsers.value.tmdId, schoolIds: schoolArr, busy: 'add', role: roles }
        proxy.$api
          .setAistschool(data)
          .then((res) => {
            console.log(res, '成功的返回')
            res.state === 200
              ? (nowUsers.value.handleSchools.push(value), getSchoolList('', 'restart'), processingSchool(), ElMessage.success('操作成功'), context.emit('changerestart', true))
              : res.state === 201
                ? (ElMessage.success('已关联，请勿重复操作'), getSchoolList('', 'restart'))
                : ''
          })
          .catch((error) => {
            ElMessage.error('关联失败，API异常')
          })
      })
    }
    function removeSchool (value, index) {
      console.log(value, index)
      ElMessageBox.confirm(`请问您确定将 ${nowUsers.value.name} 与 ${value.name} 取消关联吗 ？`, '取消关联', {
        confirmButtonText: proxy.$t(`commonMsg.confirm`),
        cancelButtonText: proxy.$t(`commonMsg.closes`),
        type: 'error',
        center: true,
      }).then(() => {
        let schoolArr = [value.id]
        let roles = nowUsers.value.handleRoles[0] === 'sales' ? 'sales' : nowUsers.value.handleRoles[0] === 'assist' ? 'assist' : nowUsers.value.handleRoles[0] === 'admin' || nowUsers.value.handleRoles[0] === 'leader' ? '' : ''
        let data = { partitionKey: nowUsers.value.partitionKey, userId: nowUsers.value.userId, tmdId: nowUsers.value.tmdId, schoolIds: schoolArr, busy: 'del', role: roles }
        proxy.$api
          .setAistschool(data)
          .then((res) => {
            res.state === 200 ? (nowUsers.value.handleSchools.splice(index, 1), getSchoolList('', 'restart'), processingSchool(), context.emit('changerestart', true), ElMessage.success('操作成功')) : ''
          })
          .catch((error) => {
            ElMessage.error('取消关联失败，API异常')
          })
      })
    }
    function checkSchool (value, row) {
      multipleSchool.value = value
      console.log(multipleSchool.value, '111')
    }
    function removeBatch (value) {
      removeBatchschool.value = value
    }
    function multipleCorrelation () {
      let schoolData = multipleSchool.value
      let schoolName = ''
      if (schoolData.length < 5) {
        schoolData.forEach((item) => {
          schoolName = schoolName + '，' + item.name
        })
      } else {
        for (let i = 0; i < 5; i++) {
          schoolName = schoolName + '，' + schoolData[i].name
        }
        schoolName = schoolName + '等...'
      }
      ElMessageBox.confirm(`请问您确定将 ${nowUsers.value.name} 设为 ${schoolName} 学校的顾问，进行数据关联吗 ？`, '关联学校', {
        confirmButtonText: proxy.$t(`commonMsg.confirm`),
        cancelButtonText: proxy.$t(`commonMsg.closes`),
        type: 'success',
        center: true,
      }).then(() => {
        let schoolArr = []
        for (let i in schoolData) {
          schoolArr.push(schoolData[i].id)
        }
        console.log(nowUsers.value, '用户信息')
        let roles = nowUsers.value.handleRoles[0] === 'sales' ? 'sales' : nowUsers.value.handleRoles[0] === 'assist' ? 'assist' : nowUsers.value.handleRoles[0] === 'admin' || nowUsers.value.handleRoles[0] === 'leader' ? '' : ''
        let data = { partitionKey: nowUsers.value.partitionKey, userId: nowUsers.value.userId, tmdId: nowUsers.value.tmdId, schoolIds: schoolArr, busy: 'add', role: roles }
        proxy.$api
          .setAistschool(data)
          .then((res) => {
            console.log(res, '成功的返回')
            res.state === 200
              ? ((nowUsers.value.handleSchools = nowUsers.value.handleSchools.concat(schoolData)), getSchoolList('', 'restart'), processingSchool(), context.emit('changerestart', true), ElMessage.success('操作成功'))
              : res.state === 201
                ? (ElMessage.success('已关联，请勿重复操作'), getSchoolList('', 'restart'))
                : ''
          })
          .catch((error) => {
            ElMessage.error('关联失败，API异常')
          })
      })
    }
    function multipeRemove () {
      let schoolData = removeBatchschool.value
      let schoolName = ''
      console.log(schoolData, '学校信息')
      if (schoolData.length < 5) {
        schoolData.forEach((item) => {
          schoolName = schoolName ? schoolName + '，' + item.name : item.name
        })
      } else {
        for (let i = 0; i < 5; i++) {
          schoolName = schoolName ? schoolName + '，' + schoolData[i].name : schoolData[i].name
        }
        schoolName = schoolName + '等...'
      }
      ElMessageBox.confirm(`请问您确定将 ${schoolName} 移除学校关联，取消数据关联吗 ？`, '取消关联学校', {
        confirmButtonText: proxy.$t(`commonMsg.confirm`),
        cancelButtonText: proxy.$t(`commonMsg.closes`),
        type: 'warning',
        center: true,
      }).then(() => {
        let schoolArr = []
        for (let s of schoolData) {
          s.id ? schoolArr.push(s.id) : ''
        }
        let roles = nowUsers.value.handleRoles[0] === 'sales' ? 'sales' : nowUsers.value.handleRoles[0] === 'assist' ? 'assist' : nowUsers.value.handleRoles[0] === 'admin' || nowUsers.value.handleRoles[0] === 'leader' ? '' : ''
        let data = { partitionKey: nowUsers.value.partitionKey, userId: nowUsers.value.userId, tmdId: nowUsers.value.tmdId, schoolIds: schoolArr, busy: 'del', role: roles }
        proxy.$api
          .setAistschool(data)
          .then((res) => {
            if (res.state === 200) {
              console.log(schoolData, '内容')
              schoolData.forEach((item, index) => {
                let iteId = item.id
                console.log(iteId, 'ID值')
                for (let e in nowUsers.value.handleSchools) {
                  console.log(nowUsers.value.handleSchools, '值')
                  iteId === nowUsers.value.handleSchools[e].id ? nowUsers.value.handleSchools.splice(e, 1) : ''
                }
              })
              getSchoolList('', 'restart')
              processingSchool()
              context.emit('changerestart', true)
              ElMessage.success('操作成功')
            }
          })
          .catch((error) => {
            ElMessage.error('取消关联失败，API异常')
          })
      })
    }
    function processingSchool (state) {
      console.log(tableData.value, original.value, '原始数据和变更数据')
      state ? tableData.value = original.value : ''
      let allSchool = JSON.parse(JSON.stringify(tableData.value))
      let handleSchools = nowUsers.value.handleSchools
      for (let i in handleSchools) {
        let schoolInfo = handleSchools[i].id
        for (let s in allSchool) {
          allSchool[s].id === schoolInfo ? allSchool.splice(s, 1) : ''
        }
      }
      tableData.value = allSchool
      loadingData.value.list = false
    }
    function debounce (fn, wait) {
      if (timer.value !== null) {
        clearTimeout(timer.value)
      }
      timer.value = setTimeout(fn, wait)
    }
    function personnelSearch () {
      let names = schoolSearch.value
      let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g")
      let data = reg.test(names) ? { name: names } : { scId: names }
      proxy.$api.getSchooldata(data).then((res) => {
        if (res.state === 200) {
          for (let i in res.schoolAssists) {
            if (res.schoolAssists[i].assists) {
              res.schoolAssists[i].assisName = ''
              let datas = res.schoolAssists[i].assists
              for (let y in datas) {
                res.schoolAssists[i].assisName = res.schoolAssists[i].assisName + datas[y].tmdName + ','
              }
            }
          }
          tableData.value = res.schoolAssists
          processingSchool()
        }
      }).catch((error) => {
        ElMessage.error('搜索学校失败，API异常')
      })
    }
    //加载所有学区信息
    async function areaData () {
      await proxy.$api.getCapacity({}).then((res) => {
        console.log(res, '学区信息')
        res.state === 200 ? (res.areas.forEach((item) => { areaList.value.data.push({ value: item.id, label: item.name, situate: item.institution }) }), store.commit('getPoint', areaList.value.data)) : ''
      }).catch((error) => {
        ElMessage.error('API异常，获取学区失败')
      })
    }
    //筛选学区数据列表
    function getAreaschool (value) {
      console.log(value, 'V')
      tableData.value = []
      let data = value !== 'all' ? { areaId: value } : getSchoolList('', 'restart')
      if (value !== 'all') {
        loadingData.value.list = true
        proxy.$api.getForareaSchool(data).then((res) => {
          console.log(res, '现在区域拥有的学校')
          if (res.state === 200) {
            for (let y in res.joinAreaSchools) {
              let areaValue = res.joinAreaSchools[y].areaId
              res.joinAreaSchools[y].areaName = ''
              res.joinAreaSchools[y].institution = ''
              res.joinAreaSchools[y].assisName = ''
              for (let i in areaList.value.data) {
                areaValue === areaList.value.data[i].value ? (res.joinAreaSchools[y].areaName = areaList.value.data[i].label, res.joinAreaSchools[y].institution = areaList.value.data[i].situate) : ''
              }
              for (let e in res.joinAreaSchools[y].assists) {
                res.joinAreaSchools[y].assisName !== '' ? res.joinAreaSchools[y].assisName = res.joinAreaSchools[y].assisName + ',' + res.joinAreaSchools[y].assists[e].tmdName : res.joinAreaSchools[y].assisName = res.joinAreaSchools[y].assists[e].tmdName
              }
            }
            tableData.value = res.joinAreaSchools
            processingSchool()
            nextpageToken.value = null
          }
          loadingData.value.list = false
        }).catch((error) => {
          ElMessage.error('获取筛选学校列表失败')
          loadingData.value.list = false
        })
      }
    }
    //关联的筛选
    function correlaSchool (value) {
      console.log(value, '筛选')
      let targetId = value
      if (targetId === 'all') {
        nowUsers.value.handleSchools = correlaData.value
      } else {
        let filterData = nowUsers.value.handleSchools.filter((item) => {
          return item.areaId === targetId
        })
        nowUsers.value.handleSchools = filterData
      }
    }
    //处理显示目前关联的
    function nowRelevance (value) {
      console.log(value, '这个人的身份')
      nowUsers.value = JSON.parse(JSON.stringify(value))
      let nowUserdata = nowUsers.value
      nowUserdata.handleSchools.forEach((item) => {
        let areaIds = item.areaId
        item.areaName = ''; item.institution = ''
        for (let i of areaList.value.data) {
          i.value === areaIds ? (item.areaName = i.label, item.institution = i.situate) : ''
        }
      })
      nowUsers.value.handleSchools = nowUserdata.handleSchools
      correlaData.value = nowUserdata.handleSchools
      value.handleRoles.includes('admin') || value.handleRoles.includes('leader') ? adminOrleader.value = true : adminOrleader.value = false
      loadingData.value.possess = false
    }
    watch(scrollHeight, (newdata, olddata) => {
      console.log(newdata, olddata, '监听的数据')
      if (newdata < olddata) {
        newdata <= 0 ? getSchoolList(nextpageToken.value) : ''
      }
    })
    watch(
      props,
      (newuser) => {
        newuser ? (areaList.value.data.push(...newuser.areadata), nowRelevance(newuser.userdata), processingSchool(true)) : ''
        console.log(nowUsers.value, '触发监听')
      },
      { immediate: true, deep: true }
    )
    watch(schoolSearch, (newdata) => {
      if (newdata.trim().length !== 0) {
        debounce(personnelSearch, 500)
      } else {
        tableData.value = original.value
      }
    })
    getSchoolList()
    // areaData()
    return {
      tableData,
      tableDatas,
      correlation,
      removeSchool,
      nowUsers,
      getSchoolList,
      checkSchool,
      multipleSchool,
      multipleCorrelation,
      processingSchool,
      PowerShow,
      schoolSearch,
      timer,
      personnelSearch,
      scrollHeight,
      areaData,
      loadingData,
      areaList,
      getAreaschool,
      removeBatchschool,
      multipeRemove,
      removeBatch,
      nowRelevance,
      correlaData,
      correlaSchool,
      adminOrleader
    }
  },
}
</script>
<style scoped>
.correlationbox {
  width: 100%;
}
.correlationbox-title {
  font-size: 14px;
  color: #b2bec3;
  text-align: left;
}
.possessbox {
  width: 100%;
  overflow: hidden;
  height: 20vh;
  /* border: 1px solid #ccc; */
}
.school-list {
  width: 100%;
  margin-top: 7%;
}
.nodata {
  width: 100%;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nodata {
  font-size: 18px;
  color: #bdc3c7;
  font-weight: 700;
}
.userlist {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.userlist-name {
  font-size: 14px;
  color: #7f8c8d;
}
.photobox {
  display: inline-block;
  width: 20%;
  vertical-align: top;
}
.userlist-name {
  text-align: left;
  display: inline-block;
  width: 60%;
  vertical-align: top;
  line-height: 40px;
  margin-left: 0%;
  font-size: 18px;
}
.school-list-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.correlationbox-titles {
  width: 20%;
  font-size: 14px;
  color: #b2bec3;
  text-align: left;
}
.correlationbox-search {
  width: 45%;
}
.correlationbox-btn {
  width: 30%;
  text-align: right;
}
.notimage {
  width: 40px;
  height: 40px;
  line-height: 20px;
  text-align: center;
  background-color: #bdc3c7;
  font-size: 6px;
  color: #ecf0f1;
  margin: 0 auto;
}
.areaitem-name,
.correlationbox-num {
  color: #409eff;
}
.areaitem-insti {
  color: #909399;
}
</style>
<style>
.school-list-header .el-button--small {
  min-height: 25px;
  padding: 7px 10px;
}
</style>