|
|
@@ -53,10 +53,16 @@
|
|
|
<span class="filtratebox-phase-title subclass">精准选择：</span>
|
|
|
<div class="filtratebox-phase-content precise">
|
|
|
<div v-if="clickNum.subject === 0 || clickNum.subject === 2" class="schoolclass">
|
|
|
- <el-cascader v-model="optionsValue" :options="options" :props="props2" clearable />
|
|
|
+ <el-cascader v-model="optionsValue" :options="options" :props="props2" :before-filter="beforefilter" :collapse-tags=true :collapse-tags-tooltip=true filterable :filter-method="keywords">
|
|
|
+ </el-cascader>
|
|
|
+ <div class="addschoolbtn" @click="(adddialog=true,searchInit(),addvalue='')">
|
|
|
+ <el-icon color="#606266">
|
|
|
+ <CirclePlus />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div v-else-if="clickNum.subject === 1" class="aresclass">
|
|
|
- <el-select v-model="optionsValue" multiple placeholder="选择相应的学区进行统计" clearable>
|
|
|
+ <el-select v-model="optionsValue" multiple filterable :filter-method="remoteMethod" collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="选择相应的学区进行统计" clearable>
|
|
|
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
@@ -167,6 +173,45 @@
|
|
|
</template>
|
|
|
</el-auto-resizer>
|
|
|
</div>
|
|
|
+ <div class="addschool-dialog">
|
|
|
+ <el-dialog v-model="adddialog" title="学校搜索" width="30%">
|
|
|
+ <div class="addschool-box">
|
|
|
+ <div>
|
|
|
+ <el-input v-model="addvalue" placeholder="搜索学校简码" class="input-with-select">
|
|
|
+ <template #append>
|
|
|
+ <el-button :icon="Search" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="school-list">
|
|
|
+ <div class="notsearch-box" v-if="!addschool.id"><img src="@/assets/img/notsearch.png" /></div>
|
|
|
+ <div class="search-result" v-else-if="addschool.id">
|
|
|
+ <p>搜索结果：</p>
|
|
|
+ <div class="result-box">
|
|
|
+ <p><span>学校名称：</span><span class="result-text">{{addschool.name}}</span></p>
|
|
|
+ <p><span>学校简码：</span><span class="result-text">{{addschool.id}}</span></p>
|
|
|
+ <p><span>学校地址：</span><span class="result-text">{{addschool.region}}{{addschool.province}}{{addschool.city}}{{addschool.dist}}</span></p>
|
|
|
+ <div class="school-type">
|
|
|
+ <div>学校类型：</div>
|
|
|
+ <div><el-tag v-if="addschool.isvirtual">虚拟学校</el-tag><el-tag v-else-if="!addschool.isvirtual" type="success">实体学校</el-tag></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="adddialog = false">取消</el-button>
|
|
|
+ <el-button type="primary" @click="addschoolfn()" v-if="addschool.id">
|
|
|
+ 添加
|
|
|
+ </el-button>
|
|
|
+ <el-button type="info" v-if="!addschool.id" disabled>
|
|
|
+ 添加
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div v-else-if="showState==='details'">
|
|
|
<Details @myback="changStateshow" :detailsData="detailsData"></Details>
|
|
|
@@ -219,7 +264,7 @@
|
|
|
import option_cn from '@/static/regions/region_cn.json'
|
|
|
import { ref, getCurrentInstance, watch } from 'vue'
|
|
|
import { ElMessage, TableV2SortOrder, ElLoading } from 'element-plus'
|
|
|
-import { Search } from '@element-plus/icons-vue'
|
|
|
+import { Search, CirclePlus } from '@element-plus/icons-vue'
|
|
|
import Details from './details.vue'
|
|
|
let { proxy } = getCurrentInstance()
|
|
|
let drawer = ref(false)
|
|
|
@@ -364,6 +409,7 @@ let optionsValue = ref()
|
|
|
const props2 = {
|
|
|
multiple: true,
|
|
|
checkStrictly: false,
|
|
|
+ collapse: true,
|
|
|
label: "name",
|
|
|
value: "id",
|
|
|
}
|
|
|
@@ -424,6 +470,20 @@ let dataSource = ref({
|
|
|
area: [],
|
|
|
composite: [],
|
|
|
})
|
|
|
+let timer = ref()
|
|
|
+let oldKeyword = ref('')
|
|
|
+let adddialog = ref(false)
|
|
|
+let addvalue = ref('')
|
|
|
+let addschool = ref({
|
|
|
+ name: '',
|
|
|
+ id: '',
|
|
|
+ region: '',
|
|
|
+ province: '',
|
|
|
+ city: '',
|
|
|
+ dist: '',
|
|
|
+ areaId: '',
|
|
|
+ isvirtual: false,
|
|
|
+})
|
|
|
function changeState (value) {
|
|
|
console.log(value)
|
|
|
showState.value = 'details'
|
|
|
@@ -552,6 +612,107 @@ async function filterDistrict (state, valueArr) {
|
|
|
})
|
|
|
return schoolList
|
|
|
}
|
|
|
+function debounce (fn, wait) {
|
|
|
+ if (timer.value !== null) {
|
|
|
+ clearTimeout(timer.value)
|
|
|
+ }
|
|
|
+ timer.value = setTimeout(fn, wait)
|
|
|
+}
|
|
|
+function keywords (node, keyword) {
|
|
|
+ // let back = ''
|
|
|
+ // if (oldKeyword.value === '' || oldKeyword.value === undefined) {
|
|
|
+ // oldKeyword.value = keyword
|
|
|
+ // debounce(back = filterSchool(keyword), 500)
|
|
|
+ // } else if (oldKeyword.value === keyword) {
|
|
|
+ // return
|
|
|
+ // } else if (oldKeyword.value !== keyword) {
|
|
|
+ // oldKeyword.value = keyword
|
|
|
+ // debounce(back = filterSchool(keyword), 500)
|
|
|
+ // }
|
|
|
+ // console.log(back, 'backsssssss')
|
|
|
+ // return true
|
|
|
+ console.log(node, keyword)
|
|
|
+ if (node.data.name.indexOf(keyword) !== -1 || node.data.id === keyword) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+}
|
|
|
+function filterSchool (keyword) {
|
|
|
+ console.log(keyword, '接收到的值')
|
|
|
+ let dataArr = dataSource.value.composite
|
|
|
+ let filterArr = []
|
|
|
+ dataArr.forEach((item) => {
|
|
|
+ item.children.length > 0 ? item.children.forEach((itema) => { itema.name.indexOf(keyword) !== -1 || itema.id == keyword ? filterArr.push({ "id": itema.id, "name": itema.name, "children": [] }) : '' }) : ''
|
|
|
+ })
|
|
|
+ console.log(filterArr, 'filter结果')
|
|
|
+ return filterArr
|
|
|
+ // options.value = filterArr
|
|
|
+ console.log(options.value, '最终')
|
|
|
+}
|
|
|
+function remoteMethod (key) {
|
|
|
+ console.log(key, '???')
|
|
|
+ if (!key) {
|
|
|
+ options.value = dataSource.value.composite
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let dataArr = dataSource.value.composite
|
|
|
+ let fArr = []
|
|
|
+ dataArr.forEach((item) => {
|
|
|
+ item.name.indexOf(key) !== -1 ? fArr.push(item) : ''
|
|
|
+ })
|
|
|
+ options.value = fArr
|
|
|
+}
|
|
|
+function beforefilter () {
|
|
|
+ let keyvalue = addvalue.value
|
|
|
+ let data = { schoolIds: [keyvalue] }
|
|
|
+ proxy.$api.getfilterSchool(data).then((res) => {
|
|
|
+ console.log(res, 'scback')
|
|
|
+ if (res.state === 200 && res.data.length > 0) {
|
|
|
+ addschool.value.name = res.data[0].name
|
|
|
+ addschool.value.id = res.data[0].id
|
|
|
+ addschool.value.region = res.data[0].region
|
|
|
+ addschool.value.province = res.data[0].province
|
|
|
+ addschool.value.city = res.data[0].city
|
|
|
+ addschool.value.dist = res.data[0].dist
|
|
|
+ addschool.value.areaId = res.data[0].areaId
|
|
|
+ addschool.value.isvirtual = res.data[0].isvirtual
|
|
|
+ } else {
|
|
|
+ searchInit()
|
|
|
+ ElMessage.info('未查询到相关学校信息，请确认学校简码')
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ ElMessage.error('API异常,未查询到信息')
|
|
|
+ })
|
|
|
+}
|
|
|
+//搜索清空
|
|
|
+function searchInit () {
|
|
|
+ addschool.value.name = ''
|
|
|
+ addschool.value.id = ''
|
|
|
+ addschool.value.region = ''
|
|
|
+ addschool.value.province = ''
|
|
|
+ addschool.value.city = ''
|
|
|
+ addschool.value.dist = ''
|
|
|
+ addschool.value.isvirtual = false
|
|
|
+}
|
|
|
+//添加虚拟学校
|
|
|
+function addschoolfn () {
|
|
|
+ let resultA = options.value.findIndex(item => item.id === 'notarea')
|
|
|
+ resultA === -1 ? options.value.push({ id: 'notarea', name: '*已搜索学校*', province: '', city: '', children: [] }) : ''
|
|
|
+ let ids = addschool.value.id
|
|
|
+ let pushArr = [addschool.value.areaId, addschool.value.id]
|
|
|
+ if (!addschool.value.areaId) {
|
|
|
+ options.value.forEach((item) => {
|
|
|
+ item.id === 'notarea' ? (item.children.push(addschool.value), optionsValue.value.push(['notarea', addschool.value.id])) : ''
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ options.value.forEach((item) => {
|
|
|
+ item.children.length > 0 ? item.children.forEach((itemc) => { itemc.id === ids ? (optionsValue.value = [], optionsValue.value.push(pushArr)) : '' }) : ''
|
|
|
+ })
|
|
|
+ }
|
|
|
+ adddialog.value = false
|
|
|
+ searchInit()
|
|
|
+}
|
|
|
// init()
|
|
|
dataInit()
|
|
|
filterDistrict()
|
|
|
@@ -562,8 +723,12 @@ watch(activeNames, (newdata) => {
|
|
|
changeHight.value = 56
|
|
|
}
|
|
|
})
|
|
|
-watch(checkList, (newvalue) => {
|
|
|
- console.log(newvalue)
|
|
|
+watch(addvalue, (newvalue) => {
|
|
|
+ if (newvalue.trim().length !== 0) {
|
|
|
+ debounce(beforefilter, 800)
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
})
|
|
|
watch(clickNum, (newv) => {
|
|
|
console.log(newv, '新值')
|
|
|
@@ -673,6 +838,16 @@ watch(clickNum, (newv) => {
|
|
|
padding-left: 1%;
|
|
|
text-align: left;
|
|
|
}
|
|
|
+.schoolclass {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.addschoolbtn {
|
|
|
+ position: absolute;
|
|
|
+ top: 6px;
|
|
|
+ right: 10%;
|
|
|
+ display: block;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
.exportbtn {
|
|
|
margin-right: 2%;
|
|
|
}
|
|
|
@@ -704,6 +879,41 @@ watch(clickNum, (newv) => {
|
|
|
bottom: 0%;
|
|
|
display: block;
|
|
|
}
|
|
|
+.addschool-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0% 1% 1% 1%;
|
|
|
+}
|
|
|
+.school-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 40vh;
|
|
|
+ margin-top: 1%;
|
|
|
+}
|
|
|
+.notsearch-box img {
|
|
|
+ width: 75%;
|
|
|
+ /* height: 100%; */
|
|
|
+}
|
|
|
+.search-result {
|
|
|
+ width: 100%;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.result-box {
|
|
|
+ padding: 1% 1% 0% 2%;
|
|
|
+ border-radius: 5px;
|
|
|
+ box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
|
|
|
+}
|
|
|
+.result-box p,
|
|
|
+.result-box div {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #9ba1b4;
|
|
|
+}
|
|
|
+.result-box p .result-text {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #303a5d;
|
|
|
+}
|
|
|
+.school-type {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
</style>
|
|
|
<style>
|
|
|
.data-tables .header-class,
|
