|
|
@@ -61,8 +61,96 @@
|
|
|
<p class="created-two-title">接收人群</p>
|
|
|
<div class="candidate">
|
|
|
<div class="candidate-select">
|
|
|
- <p class="candidate-hint">搜索选人</p>
|
|
|
- <div class="type-select">类型搜索</div>
|
|
|
+ <div class="candidate-hint">搜索选人</div>
|
|
|
+ <div class="findbox">
|
|
|
+ <div class="type-select">
|
|
|
+ <div class="type-select-header">
|
|
|
+ <el-image :src="logoImg" fit="cover" v-if="typeselect ===0" class="logoImg" />
|
|
|
+ <div class="pathtext" v-else>
|
|
|
+ <span @click="typeselect=0">根据学区选择</span>/
|
|
|
+ <span>智慧教育学区</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="type-select-content">
|
|
|
+ <!--选择根据学区-->
|
|
|
+ <div class="type-list" v-if="typeselect ===0">
|
|
|
+ <div class="itemtype" @click="typeselect=1">
|
|
|
+ <svg class="select-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-icon_yingyongfanweiguang"></use>
|
|
|
+ </svg>
|
|
|
+ 根据学区选择
|
|
|
+ <div class="select-icon-next">
|
|
|
+ <el-icon>
|
|
|
+ <ArrowRight />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="itemtype" @click="typeselect=1">
|
|
|
+ <svg class="select-icon" aria-hidden="true">
|
|
|
+ <use xlink:href="#icon-xuexiao7"></use>
|
|
|
+ </svg>
|
|
|
+ 根据学校选择
|
|
|
+ <div class="select-icon-next">
|
|
|
+ <el-icon>
|
|
|
+ <ArrowRight />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--选择根据学区end-->
|
|
|
+ <!--学区选择列表-->
|
|
|
+ <div class="type-list" v-else-if="typeselect ===1">
|
|
|
+ <el-checkbox-group v-model="checkList">
|
|
|
+ <div class="itemtype-area">
|
|
|
+ <el-checkbox label="智慧教育学区" />
|
|
|
+ <div class="next-icon" @click="typeselect=2">
|
|
|
+ 下级
|
|
|
+ <el-icon>
|
|
|
+ <ArrowRight />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="itemtype-area">
|
|
|
+ <el-checkbox label="醍摩豆智慧学区" />
|
|
|
+ <div class="next-icon" @click="typeselect=2">
|
|
|
+ 下级
|
|
|
+ <el-icon>
|
|
|
+ <ArrowRight />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <!--学区选择列表end-->
|
|
|
+ <!--学校选择列表-->
|
|
|
+ <div class="type-list" v-else-if="typeselect ===2">
|
|
|
+ <el-checkbox-group v-model="checkList">
|
|
|
+ <div class="itemtype-area">
|
|
|
+ <el-checkbox label="成都银都紫藤小学" />
|
|
|
+ <!-- <div class="next-icon">
|
|
|
+ 下级
|
|
|
+ <el-icon>
|
|
|
+ <ArrowRight />
|
|
|
+ </el-icon>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="itemtype-area">
|
|
|
+ <el-checkbox label="成都师范小学" />
|
|
|
+ <!-- <div class="next-icon">
|
|
|
+ 下级
|
|
|
+ <el-icon>
|
|
|
+ <ArrowRight />
|
|
|
+ </el-icon>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <!--学小选择列表end-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <i class="line-type"></i>
|
|
|
+ <div class="serach-select">搜索选人</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<i class="line"></i>
|
|
|
<div class="candidate-result">
|
|
|
@@ -76,8 +164,10 @@
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import { ref, getCurrentInstance, defineProps, watch, defineExpose, onMounted, } from 'vue'
|
|
|
+import { ArrowRight } from '@element-plus/icons-vue'
|
|
|
import zhCn from "element-plus/lib/locale/lang/zh-cn";
|
|
|
let locale = zhCn
|
|
|
+let logoImg = require('@/assets/img/logox.png')
|
|
|
let active = ref(0)
|
|
|
const form = ref({
|
|
|
name: '',
|
|
|
@@ -95,6 +185,151 @@ const form = ref({
|
|
|
})
|
|
|
let value3 = ref(false)
|
|
|
let value4 = ref(false)
|
|
|
+let typeselect = ref(0)
|
|
|
+let checkList = ref([])
|
|
|
+let typeLevel = ref({
|
|
|
+ areaName: '',
|
|
|
+ areaId: '',
|
|
|
+ typename: ''
|
|
|
+})
|
|
|
+const options = [
|
|
|
+ {
|
|
|
+ value: 'guide',
|
|
|
+ label: 'Guide',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ value: 'disciplines',
|
|
|
+ label: 'Disciplines',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ value: 'consistency',
|
|
|
+ label: 'Consistency',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'feedback',
|
|
|
+ label: 'Feedback',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'efficiency',
|
|
|
+ label: 'Efficiency',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'controllability',
|
|
|
+ label: 'Controllability',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'navigation',
|
|
|
+ label: 'Navigation',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ value: 'side nav',
|
|
|
+ label: 'Side Navigation',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'top nav',
|
|
|
+ label: 'Top Navigation',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'component',
|
|
|
+ label: 'Component',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ value: 'basic',
|
|
|
+ label: 'Basic',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ value: 'layout',
|
|
|
+ label: 'Layout',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'color',
|
|
|
+ label: 'Color',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'typography',
|
|
|
+ label: 'Typography',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'icon',
|
|
|
+ label: 'Icon',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'button',
|
|
|
+ label: 'Button',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'form',
|
|
|
+ label: 'Form',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ value: 'radio',
|
|
|
+ label: 'Radio',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'checkbox',
|
|
|
+ label: 'Checkbox',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'input',
|
|
|
+ label: 'Input',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'input-number',
|
|
|
+ label: 'InputNumber',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'select',
|
|
|
+ label: 'Select',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'cascader',
|
|
|
+ label: 'Cascader',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'switch',
|
|
|
+ label: 'Switch',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'slider',
|
|
|
+ label: 'Slider',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'time-picker',
|
|
|
+ label: 'TimePicker',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'date-picker',
|
|
|
+ label: 'DatePicker',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'datetime-picker',
|
|
|
+ label: 'DateTimePicker',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'upload',
|
|
|
+ label: 'Upload',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'rate',
|
|
|
+ label: 'Rate',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 'form',
|
|
|
+ label: 'Form',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+]
|
|
|
function timechange (val) {
|
|
|
console.log(val)
|
|
|
}
|
|
|
@@ -173,13 +408,14 @@ function timechange (val) {
|
|
|
.candidate-select,
|
|
|
.candidate-result {
|
|
|
width: 50%;
|
|
|
+ height: 55vh;
|
|
|
}
|
|
|
.candidate-hint {
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
height: 18px;
|
|
|
line-height: 18px;
|
|
|
- background: #b2bec3;
|
|
|
+ background: #74b9ff;
|
|
|
color: #ecf0f1;
|
|
|
}
|
|
|
.line {
|
|
|
@@ -188,6 +424,89 @@ function timechange (val) {
|
|
|
line-height: 18px;
|
|
|
background: #fff;
|
|
|
}
|
|
|
+.findbox {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.type-select,
|
|
|
+.search-select {
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
+.type-list {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.itemtype {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 1.3;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ padding: 10px 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.itemtype:hover {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ /* color: #fff; */
|
|
|
+}
|
|
|
+.line {
|
|
|
+ width: 0px;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+}
|
|
|
+.line-type {
|
|
|
+ width: 0px;
|
|
|
+ height: 53vh;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+}
|
|
|
+.select-icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ vertical-align: 0em;
|
|
|
+ fill: currentColor;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.select-icon-next {
|
|
|
+ position: absolute;
|
|
|
+ right: 5%;
|
|
|
+}
|
|
|
+.next-icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 5%;
|
|
|
+ top: 20%;
|
|
|
+}
|
|
|
+.itemtype-area {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 1.3;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ /* justify-content: space-between; */
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ padding: 2px 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.type-select-header {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ border-top: 1px solid #fff;
|
|
|
+ background-color: #b2bec3;
|
|
|
+ height: 51px;
|
|
|
+}
|
|
|
+.pathtext {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 50px;
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 8px;
|
|
|
+}
|
|
|
+.pathtext span {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.pathtext span:hover {
|
|
|
+ color: #0984e3;
|
|
|
+}
|
|
|
</style>
|
|
|
<style>
|
|
|
.skip-switch .el-form-item__content {
|
|
|
@@ -206,4 +525,18 @@ function timechange (val) {
|
|
|
color: #0984e3 !important;
|
|
|
border-color: #0984e3 !important;
|
|
|
}
|
|
|
+.itemtype-area .el-checkbox__inner {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+}
|
|
|
+.itemtype-area .el-checkbox__inner::after {
|
|
|
+ width: 5px;
|
|
|
+ height: 7px;
|
|
|
+ top: 2px;
|
|
|
+ left: 4px;
|
|
|
+}
|
|
|
+.itemtype-area .el-checkbox {
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 0px;
|
|
|
+}
|
|
|
</style>
|
Li