zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

搜索输入url更改为动态传参

styleCommon-1218
zq 2 weeks ago
parent
c0d3567a80
commit
2285163265
3 changed files with 667 additions and 353 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 247
      src/components/clientSet/searchInput.vue
  2. 410
      src/views/elementGroups.vue
  3. 21
      src/views/super/paiban/college.vue

247
src/components/clientSet/searchInput.vue
View File

@ -0,0 +1,247 @@
<template>
<el-autocomplete
class="school-auto-complete"
:value="value"
:fetch-suggestions="querySearchAsync"
:placeholder="placeholder"
:debounce="debounce"
:loading="loading"
@select="handleSelect"
@input="handleInput"
@clear="handleManualClear"
:clearable="clearable"
:size="size"
:disabled="disabled"
>
<!-- 自定义下拉选项 -->
<template #default="{ item }">
<div class="flex-between school-option">
<span>{{ item.name }}</span>
<img
v-if="showSelectedIcon && item.id === selectedSchoolId"
src="@/assets/site/dropdown_chose_ic.svg"
alt="selected"
/>
</div>
</template>
</el-autocomplete>
</template>
<script>
export default {
name: 'SchoolAutoComplete',
props: {
url: {
type: String,
default: ''
},
// 双向绑定的值（学校名称）
value: {
type: String,
default: ''
},
// 选中的学校ID
selectedSchoolId: {
type: [String, Number],
default: null
},
// 占位符
placeholder: {
type: String,
default: '请输入学校名称'
},
// 防抖延迟时间
debounce: {
type: Number,
default: 300
},
// 是否显示清空按钮
clearable: {
type: Boolean,
default: true
},
// 输入框尺寸
size: {
type: String,
default: 'medium'
},
// 是否禁用
disabled: {
type: Boolean,
default: false
},
// 是否显示选中图标
showSelectedIcon: {
type: Boolean,
default: true
}
},
data() {
return {
loading: false,
timeout: null,
lastSearchKeyword: '',
schoolList: [],
// 新增：记录最后一次有效选择
lastValidSelection: null
}
},
mounted() {
// 初始化时记录当前选择
if (this.selectedSchoolId && this.value) {
this.lastValidSelection = {
id: this.selectedSchoolId,
name: this.value
}
}
},
beforeDestroy() {
clearTimeout(this.timeout)
},
methods: {
/**
* 异步搜索学校
*/
async querySearchAsync(queryString, callback) {
const keyword = queryString.trim()
if (!keyword || keyword === this.lastSearchKeyword) {
callback([])
return
}
this.lastSearchKeyword = keyword
this.loading = true
clearTimeout(this.timeout)
this.timeout = setTimeout(async () => {
try {
const schools = await this.searchSchools(keyword)
this.schoolList = schools
callback(schools)
} catch (error) {
console.error('搜索学校失败:', error)
callback([])
} finally {
this.loading = false
}
}, this.debounce)
},
/**
* 搜索学校API调用
*/
async searchSchools(keyword) {
try {
const response = await this.$http('POST', this.url, {
keyword
})
if (response.status && response.data) {
return response.data
}
return []
} catch (error) {
this.$message.error('搜索学校列表失败')
throw error
}
},
/**
* 处理选择事件
*/
handleSelect(item) {
console.log('选中学校:', item)
// 更新记录
this.lastValidSelection = {
id: item.id,
name: item.name
}
this.$emit('select', item)
this.$emit('update:selectedSchoolId', item.id)
this.$emit('input', item.name)
this.$emit('change', item)
},
/**
* 处理输入事件 - 安全版本
*/
handleInput(value) {
console.log('输入变化:', value, '当前选中:', this.selectedSchoolId)
// 只更新显示的值
this.$emit('input', value)
// 重要：这里不自动触发清空
// 清空只会在 handleManualClear 中触发
},
handleManualClear() {
console.log('用户手动清空')
this.clearSelection()
},
clearSelection() {
console.log('执行清空操作')
this.$emit('input', '')
this.$emit('update:selectedSchoolId', null)
this.$emit('clear')
this.lastSearchKeyword = ''
this.lastValidSelection = null
},
setSelectedSchool(school) {
if (school && school.id && school.name) {
this.lastValidSelection = {
id: school.id,
name: school.name
}
this.$emit('input', school.name)
this.$emit('update:selectedSchoolId', school.id)
this.$emit('select', school)
}
},
clear() {
this.clearSelection()
},
async triggerSearch(keyword) {
return await this.searchSchools(keyword || this.value)
},
/**
* 恢复上一次的有效选择
*/
restoreLastSelection() {
if (this.lastValidSelection) {
this.setSelectedSchool(this.lastValidSelection)
}
}
}
}
</script>
<style lang="scss" scoped>
.school-auto-complete {
width: 100%;
}
.school-option {
width: 100%;
span {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
img {
width: 16px;
height: 16px;
margin-left: 8px;
}
}
</style>

410
src/views/elementGroups.vue
View File

@ -1,13 +1,12 @@
<template>
<div class="main-content12">
<div class="elementWrap">
<div id="example1" class="mb24 ele-item gap10">
<label for="">输入+下拉 组合框</label>
<section id="example1" class="demo-section column gap12">
<h2>输入+下拉 组合框</h2>
<domainBind label="域名设置" @handleEvent="handleEvent" />
</div>
<div id="example2" class="ele-item">
<label style="font-weight: 600;text-align: left;" for="">文案提示框</label>
<div class="column gap10">
</section>
<section id="example2" class="demo-section column gap12">
<h2>文案提示框</h2>
<PromptText text='这是一个提示框--文案随便写的啦' :type="1" />
<PromptText text='这是一个提示框--文案随便写的啦' :type="2" />
<PromptText text='这是一个提示框--文案随便写的啦' :type="3" />
@ -21,8 +20,8 @@
</template>
<template #desc>
<p class="mt12 flex">
1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
target="_blank">
1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F"
class="flex" target="_blank">
<img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
</p>
<p class="mt10 flex">
@ -32,11 +31,11 @@
</p>
</template>
</PromptText>
</div>
</div>
</section>
<div class="ele-item" id="example3">
<label for="">实时预览外层嵌套</label>
<section id="example3" class="demo-section">
<h2 for="">实时预览外层嵌套</h2>
<div class="ele-item">
<!-- 默认 显示电脑端、手机端 -->
<!-- :showMobile="false" :showPc="false" -->
<DevicePreview>
@ -49,52 +48,61 @@
</template>
</DevicePreview>
</div>
<div class="ele-item gap12" id="example4">
<label for="">不同状态：</label>
</section>
<section id="example4" class="demo-section">
<h2>状态标签</h2>
<div class="ele-item gap12">
<div class="status-item divgreen"><span class="fontgreen">状态标签</span></div>
<div class="status-item divorange"><span class="fontorange">状态标签</span></div>
<div class="status-item divgray"><span class="fontgray">状态标签</span></div>
<div class="status-item divred"><span class="fontred">状态标签</span></div>
<div class="status-item divblue"><span class="fontblue">状态标签</span></div>
</div>
</section>
<section id="example4" class="demo-section">
<h2 for="">卡片默认及选中样式</h2>
<div class="ele-item gap12" id="example5">
<label for="">卡片默认及选中样式</label>
<div class="wallet-item point " >
<div class="wallet-item point ">
<img src="@/assets/site/tem-active.svg" class="tem-active" alt="" v-if="false">
<div class="wallet-name">这是默认</div>
<div class="desc">小文案小文案小文案小文案小文案</div>
</div>
<div class="wallet-item point wallet-item-active" >
<div class="wallet-item point wallet-item-active">
<img src="@/assets/site/tem-active.svg" class="tem-active" alt="">
<div class="wallet-name">这是选中</div>
<div class="desc">小文案小文案小文案小文案小文案</div>
</div>
</div>
</section>
<!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
<el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
<div id="example6">
<section id="example6" class="demo-section">
<h2 for="">copy固定内容</h2>
<div class="ele-item">
<label for="">copy固定内容</label>
<!-- 复制固定文本 -->
<GuipButton size="big" v-clipboard="'渝过田晴'">复制渝过田晴</GuipButton>
<!-- 复制动态文本 -->
<GuipButton size="big" v-clipboard="content">点击复制: {{ content }}</GuipButton>
</div>
</div>
<div id="example7">
<div class="ele-item">
<label for="">手动点击copy</label>
</section>
<section id="example7" class="demo-section">
<h2 for="">手动点击copy</h2>
<div class="ele-item gap24">
<GuipInput v-model="form.input1">
<!-- 提示可以不添加 、图标可更换 -->
<GuipToolTip content="点击复制到粘贴板" slot="suffix">
<img src="@/assets/menu/Totalprofit.svg" @click="handleClickCopy" />
</GuipToolTip>
</GuipInput>
<GuipInput width="300px" placeholder="复制完毕后，粘贴试一下" v-model="form.input4" />
</div>
</div>
<div id="example8">
</section>
<section id="example8" class="demo-section">
<h2>单选框</h2>
<div class="ele-item">
<label for="">单选框(对象格式)：</label>
<GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
@ -102,44 +110,60 @@
</div>
<div class="ele-item">
<label for="">单选框2（数组格式 + 自定义取值）：</label>
<GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language" selectedLabelKey="selectedLabel"
@change="radioChange" :rules="rules.language" label-key="name" :disabledKeys="['1']"
value-key="id" />
<GuipRadio v-model="form.language" :options="languageOptions1" label="自定义属性" prop="language"
selectedLabelKey="selectedLabel" @change="radioChange" :rules="rules.language"
label-key="name" :disabledKeys="['1']" value-key="id" />
</div>
<div class="ele-item">
<label for="">单选框：</label>
<el-radio v-model="radio1" :label="1">选项一</el-radio>
<el-radio v-model="radio1" :label="2">选项二</el-radio>
</div>
<div class="shortLine">--------------------分割线------------------------------</div>
<div class="ele-item">
<label for="">单选框组：</label>
<el-radio-group v-model="radio" @input="radioChange">
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
</div>
<div id="example9">
</section>
<section id="example9" class="demo-section">
<h2>下拉选择框</h2>
<div class="ele-item">
<label for="">数组套对象类型下拉框：</label>
<!-- :extraItem="{label:'全部',value:'99999'}" 传入必须是 label、value； 组件内会自动改为自定义的 labelKey、valueKey-->
<div class="flex">
<GuipSelect width="150px" v-model="form.card" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
prop="card" :options="options" valueKey="id1" labelKey="id2" :extraItem="{label:'全部',value:'99999'}"/>
<GuipSelect width="150px" v-model="form.card" clearable label="卡片"
:default-value="form.card" @change="selectChangeTest" prop="card" :options="options"
valueKey="id1" labelKey="id2" :extraItem="{ label: '全部', value: '99999' }" />
<p>j卢卡斯就到啦</p>
<GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
@blur="handleInput" prop="input2" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
@blur="handleInput" prop="input2" @input="handleInput" @focus="handleInput"
placeholder="这是自定义默认提示语" />
</div>
</div>
<div class="ele-item">
<label for="">纯数组[1,2]下拉框：</label>
<GuipSelect width="150px" v-model="form.card" clearable label="卡片" @change="selectChangeTest"
prop="card" :options="['麻辣烫','提拉米苏']" />
prop="card" :options="['麻辣烫', '提拉米苏']" />
</div>
<div class="ele-item">
<label for="">对象格式下拉框：</label>
<GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
prop="card" :options="languageOptions"/>
</div>
<GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card"
@change="selectChangeTest" prop="card" :options="languageOptions" />
</div>
</section>
<el-button type="primary" @click="submitForm">Submit</el-button>
<div id="example10">
<section id="example10" class="demo-section">
<h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
<GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
<GuipTable :tableData="[{payment:0,name2:10008.9,price:200}]" ref="multipleTable" @selectChange="handleSelectionChange"
:multiple="true" autoColumn="true" :loading="tableLoading">
<GuipTable :tableData="[{ payment: 0, name2: 10008.9, price: 200 }]" ref="multipleTable"
@selectChange="handleSelectionChange" :multiple="true" autoColumn="true"
:loading="tableLoading">
<!-- <template slot="header"> -->
<el-table-column width="180" fixed="left" label="名称(固定左)"></el-table-column>
<el-table-column prop="created_at" label="时间" width="200">
@ -175,18 +199,19 @@
</template>
</el-table-column>
<el-table-column prop="name2" label="姓名" width="150" :formatter="$stateFormat"></el-table-column>
<el-table-column prop="name2" label="姓名" width="150"
:formatter="$stateFormat"></el-table-column>
<el-table-column prop="statu" label="价格" width="150">
<template slot-scope="scope">
<GuipSwitch v-model="scope.row.statu" activeText="默认类型boolean" inactiveText="关闭" :active-value="1" :inactive-value="0"
@change="onSwitchChange1(scope.row)">
<GuipSwitch v-model="scope.row.statu" activeText="默认类型boolean" inactiveText="关闭"
:active-value="1" :inactive-value="0" @change="onSwitchChange1(scope.row)">
</GuipSwitch>
</template>
</el-table-column>
<el-table-column prop="price" label="价格" width="300">
<template slot-scope="scope">
<GuipSelect width="200px" v-model="scope.row.price"
:options="[{value:1,label:'哈哈'}]" defaultValue="选项1" />
<GuipSelect width="200px" v-model="scope.row.price" :options="[{ value: 1, label: '哈哈' }]"
defaultValue="选项1" />
</template>
</el-table-column>
<el-table-column prop="address" label="地址1" width="150">
@ -242,9 +267,10 @@
</template>
</GuipTable> -->
</div>
</div>
</section>
<div id="example11">
<section id="example11" class="demo-section">
<h2>文本域相关</h2>
<div class="ele-item">
<label for="">文本域：固定行数</label>
<GuipTextarea :styleObject="{ width: '450px' }" placeholder="固定行数" :rows="2" />
@ -258,22 +284,15 @@
<GuipTextarea label="详细介绍" column="column" prop="doctor_detail" width="400px" height="90px"
placeholder="请输入描述内容" desc="啊哈哈哈哈哈哈哈哈" show-word-limit />
</div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div>
<div class="ele-item" id="example12">
<label for="">输入框：</label>
</section>
<section id="example12" class="demo-section">
<h2 for="">输入框：</h2>
<div class="flex gap24">
<GuipInput ref="GuipInput" v-model="form.input1" width="200px" height="30px"
placeholder="这是自定义默认提示语" />
<div style="width: 20px;height: 10px;"></div>
<GuipInput ref="GuipInput" v-model="form.input2" :maxlength="100" @change="handleInput"
@blur="handleInput" @input="handleInput" @focus="handleInput" placeholder="这是自定义默认提示语" />
<div style="width: 20px;height: 10px;"></div>
<GuipInput v-model="form.input3" width="400px">
<span slot="prependshow">http:</span>
<!-- <img slot="prefix" src="../assets/radio_checked.svg" alt=""> -->
@ -287,10 +306,12 @@
<!-- 这个 appendshow 宽度 居中方式 自定义添加类名修改-->
<span slot="appendshow">.checkcopy.com</span>
</GuipInput>
<!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
</div>
<div class="ele-item gap12" id="example13">
<label for="">带间隔的label:</label>
<!-- <el-input placeholder="oieuwroieuwi" style="width:400px;height:60px"></el-input> -->
</section>
<section id="example13" class="demo-section">
<h2 for="">带间隔的label:</h2>
<div class="column">
<div class="flex mb12">
<div class="flex-label">
@ -300,35 +321,17 @@
<p class="desc">说明：类名是固定的</p>
</div>
<GuipInput ref="GuipInput" :column="true" v-model="form.input1" width="200px" height="30px"
placeholder="label有间隔的" label="输入框" :client-form-flex="true"/>
placeholder="label有间隔的" label="输入框" :client-form-flex="true" />
<GuipSelect ref="GuipSelect" :column="true" v-model="form.input1" width="200px" height="30px"
placeholder="label有间隔的" label="下拉框" :client-form-flex="true"/>
<GuipRadio v-model="form.language" :options="languageOptions1" label="单选" prop="language" selectedLabelKey="selectedLabel"
@change="radioChange" label-key="name" :disabledKeys="['1']" :client-form-flex="true"
value-key="id" />
</div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div>
<div id="example13">
placeholder="label有间隔的" label="下拉框" :client-form-flex="true" />
<GuipRadio v-model="form.language" :options="languageOptions1" label="单选" prop="language"
selectedLabelKey="selectedLabel" @change="radioChange" label-key="name"
:disabledKeys="['1']" :client-form-flex="true" value-key="id" />
</div>
</section>
<section id="example14" class="demo-section">
<h2>按钮集合</h2>
<div class="ele-item">
<label for="">单选框：</label>
<el-radio v-model="radio1" :label="1">选项一</el-radio>
<el-radio v-model="radio1" :label="2">选项二</el-radio>
</div>
<div class="ele-item">
<label for="">单选框组：</label>
<el-radio-group v-model="radio" @input="radioChange">
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
</div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div>
<div id="example14">
<div class="ele-item" >
<label for="">按钮尺寸：</label>
<GuipButton size="superBig">加盟并进入后台</GuipButton>
<GuipButton size="big">准备完毕，验证自有域名</GuipButton>
@ -386,7 +389,7 @@
</div>
<div class="ele-item">
<label for="">常用按钮组合</label>
<GroupFormBtns cancelText="取消吧" confirmText="确定啦"/>
<GroupFormBtns cancelText="取消吧" confirmText="确定啦" />
</div>
<!-- 暂时废弃 -->
@ -424,23 +427,23 @@
<label for="">自定义宽高按钮：</label>
<GuipButton type="primary" :btnstyle="btnstyleObj">宽高自定义</GuipButton>
</div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div>
<div class="ele-item" id="example15">
<label for="">提示：</label>
</section>
<section id="example15" class="demo-section">
<h2>提示</h2>
<div class="ele-item">
<GuipButton type="system" @click="openMessage('success')">成功提示</GuipButton>
<GuipButton type="system" @click="openMessage('error')"> 失败提示</GuipButton>
<GuipButton type="system" @click="openMessage('info')">警告提示</GuipButton>
<div class="shortLine">--------------------分割线------------------------------</div>
</div>
<div id="example15">
</section>
<section id="example16" class="demo-section">
<h2>表单布局</h2>
<div style="width: 600px;">
<h3>表单左右布局（直接使用封装好的input）</h3>
<!-- 表单左右布局 -->
<GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username" prop="username"
:rules="usernameRules" placeholder="这是自定义默认提11示语" />
<GuipInput ref="GuipInput" addClass="w510" v-model="form.username" label="Username"
prop="username" :rules="usernameRules" placeholder="这是自定义默认提11示语" />
</div>
<div style="width: 800px;height: 150px;">
@ -462,18 +465,18 @@
<!-- <GuipInput slot="formDom" ref="GuipInput" column="column" v-model="form.age" prop="age"
placeholder="请输入" /> -->
<GuipSelect slot="formDom" v-model="form.card" clearable @change="selectChangeTest"
prop="card" :options="['麻辣烫','提拉米苏']" />
prop="card" :options="['麻辣烫', '提拉米苏']" />
</GuipFormItem>
</div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div>
<div id="example17">
</section>
<section id="example17" class="demo-section">
<h2>开关集合</h2>
<div class="ele-item">
<label for="">开关L</label>
<!-- active-value 开启状态的值 -->
<!-- inactive-value 关闭状态的值 -->
<GuipSwitch v-model="form.switchValue3" activeText="默认类型boolean" inactiveText="关闭" :active-value="true" :inactive-value="false"
@change="onSwitchChange">
<GuipSwitch v-model="form.switchValue3" activeText="默认类型boolean" inactiveText="关闭"
:active-value="true" :inactive-value="false" @change="onSwitchChange">
</GuipSwitch>
</div>
<div class="ele-item">
@ -493,11 +496,10 @@
</GuipSwitch>
<p>当前值switchValue2：{{ this.form.switchValue2 }}</p>
</div>
<div class="shortLine">--------------------分割线------------------------------</div>
</div>
<div id="example18">
</section>
<section id="example18" class="demo-section">
<h2>输入框与下拉框组合</h2>
<div class="flex ele-item">
<label for="">input、drop组合使用(默认使用)</label>
<GuipFormItem column="column" class="combo-formItem w510" label="域名设置" required="true">
@ -595,10 +597,10 @@
</template>
</CustomDropdown>
</div>
</div>
</section>
</el-form>
<div class="shortLine">--------------------分割线------------------------------</div>
<div style="" class="ele-item">
<label for="">日期选择器</label>
@ -623,22 +625,32 @@
<el-button @click="save" type="primary">保存</el-button>
</div> -->
</div>
<div class="flex ele-item gap10" style="flex-wrap: wrap;" id="example19">
<label for="">指定位置提示</label>
<GuipButton type="primary" ref="button1" :btnstyle="{ width: '300px' }" @click="openDialog3('button1','bottom')">下方弹出消息提示
<section id="example19" class="demo-section">
<h2>指定位置提示</h2>
<div class="flex ele-item gap10" style="flex-wrap: wrap;">
<GuipButton type="primary" ref="button1" :btnstyle="{ width: '300px' }"
@click="openDialog3('button1', 'bottom')">下方弹出消息提示
</GuipButton>
<GuipButton type="primary" ref="button2" :btnstyle="{ width: '300px' }" @click="openDialog3('button2','top')">上方弹出消息提示
<GuipButton type="primary" ref="button2" :btnstyle="{ width: '300px' }"
@click="openDialog3('button2', 'top')">
上方弹出消息提示
</GuipButton>
<GuipButton type="primary" ref="button3" :btnstyle="{ width: '300px' }" @click="openDialog4('button3','top')">一直显示消息提示
<GuipButton type="primary" ref="button3" :btnstyle="{ width: '300px' }"
@click="openDialog4('button3', 'top')">
一直显示消息提示
</GuipButton>
<GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog6">主动隐藏消息提示
</GuipButton>
<GuipButton type="primary" ref="button5" :btnstyle="{ width: '300px' }" @click="openDialog5">动态更改提示文案
<GuipButton type="primary" ref="button5" :btnstyle="{ width: '300px' }" @click="openDialog5">
动态更改提示文案
</GuipButton>
</div>
</section>
<div class="flex ele-item gap10" style="flex-wrap: wrap;" id="example20">
<label for="">弹出框内布局集合</label>
<section id="example20" class="demo-section">
<h2>弹出框内布局集合</h2>
<div class="flex ele-item gap10" style="flex-wrap: wrap;">
<GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog">打开弹框（标题巨左、按钮居右）
</GuipButton>
<GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中）
@ -646,13 +658,18 @@
<GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog2">打开弹框-放弃原按钮，自定义
</GuipButton>
</div>
<div id="example21" class="flex ele-item gap10">
<label for="">展示加载</label>
</section>
<section id="example21" class="demo-section">
<h2>展示加载</h2>
<div class="flex ele-item gap10">
<GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
</div>
</section>
<div class="flex ele-item" id="example22">
<label for="">提示信息</label>
<section id="example22" class="demo-section">
<h2>提示信息</h2>
<div class="flex ele-item">
<GuipToolTip content="这是一个提示">
<GuipButton type="primary" size="page">悬停查看提示</GuipButton>
</GuipToolTip>
@ -672,10 +689,14 @@
:hoverColor="'#006AFF'" />
</GuipToolTip>
</div>
</section>
<div class="flex ele-item" id="example50">
<section id="example50" class="demo-section">
<h2>文档链接</h2>
<div class="flex ele-item">
<a href="https://docs.qq.com/doc/DS3dUY1NvZWhQYmNO?_t=1763546944724&nlc=1">说明文档-持续更新中</a>
</div>
</section>
<GuipDialog :dialogVisible="dialogVisible" title="自定义标题" :show-close-button="false"
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
@ -685,15 +706,14 @@
<p>这是一个自定义内容的弹框。</p>
</div>
</GuipDialog>
<GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题"
@close="handleClose" @dialogVisibleChange="dialogVisibleChange">
<GuipDialog type="center" :dialogVisible="dialogVisible1" title="自定义标题" @close="handleClose"
@dialogVisibleChange="dialogVisibleChange">
<!-- 自定义内容 -->
<div>
<p>这是一个自定义内容的弹框。</p>
</div>
</GuipDialog>
<GuipDialog type="center" :dialogVisible="dialogVisible2" title="自定义标题、内容、按钮"
:showFooterButton="false"
<GuipDialog type="center" :dialogVisible="dialogVisible2" title="自定义标题、内容、按钮" :showFooterButton="false"
@close="handleClose" @dialogVisibleChange="dialogVisibleChange">
<!-- 自定义内容 -->
<div>
@ -704,7 +724,7 @@
<!-- 样式自定义 -->
<div class="btns gap10 mt24" style="width:100%">
<GuipButton type="ignore">取消</GuipButton>
<GuipButton :btnstyle="{width:'240px'}">⚡️咖啡不加糖喔</GuipButton>
<GuipButton :btnstyle="{ width: '240px' }">⚡️咖啡不加糖喔</GuipButton>
</div>
</div>
</GuipDialog>
@ -757,7 +777,7 @@ export default {
},
data() {
return {
content:'测试一下',
content: '测试一下',
domainOptions: [
{
value: '.chachongz.com',
@ -828,16 +848,17 @@ export default {
form: {
username: '',
language: '',
switchValue3:true,
switchValue3: true,
switchValue2: '0',
domain_set: '',
domainSuffix: '11',
domainSuffix1: '.chachongz.com',
card: '1',
card1: '20',
input1: '跨年的烟火,绽放天空',
input1: '跨年的烟火',
input2: '',
input3: '',
input4: '',
},
languageOptions1: [
{ label: 'JavaScript', value: 'js', selectedLabel: '333提拉米苏33', id: 0, name: 0 },
@ -907,7 +928,7 @@ export default {
address: '上海市普陀区金沙江路 1518 弄',
price: '20',
age: 20,
statu:1,
statu: 1,
// 在支持修改的项目中，需要主动保留一份原始数据
edit_name: '王小虎', edit_address: '上海市普陀区金沙江路 1518 弄'
}, {
@ -916,7 +937,7 @@ export default {
address: '上海市普陀区金沙江路 151811 弄',
price: '10',
age: 30,
statu:1,
statu: 1,
edit_name: '王小虎11', edit_address: '上海市普陀区金沙江路 151811 弄'
@ -925,7 +946,7 @@ export default {
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
price: '200',
statu:0,
statu: 0,
}, {
date: '2016-05-01',
name: '王小虎',
@ -1092,7 +1113,7 @@ export default {
label1: '双皮奶hhhhhhhhh',
label: '北京烤鸭'
}],
tooltip:null
tooltip: null
}
},
@ -1115,18 +1136,18 @@ export default {
}
},
methods: {
switchChange(value){
console.log(value,'====value');
console.log(this.switchValue1,'===uuuu');
switchChange(value) {
console.log(value, '====value');
console.log(this.switchValue1, '===uuuu');
},
handleEvent(data){
console.log(data,'data')
handleEvent(data) {
console.log(data, 'data')
},
handleOptions(options){
console.log(options,'options')
handleOptions(options) {
console.log(options, 'options')
},
// 手动copy内容
handleClickCopy(){
handleClickCopy() {
this.$copy(this.form.input1, {
successMsg: '内容已复制到剪贴板',
errorMsg: '复制失败，请按Ctrl+C手动复制',
@ -1224,27 +1245,45 @@ export default {
getStagePurchase() {
this.tableLoading = true
const that = this
that.tableData = []
this.$http('POST', '/supernew/ajax_get_stage_purchase', {
type: 0,
cur_page: 1,
page_size: 5,
}, {
headers: {
'AUTH': '3c901fa4a19a7ad9d01238890863d499'
}
}).then(response => {
this.tableLoading = false
this.$nextTick(() => {
that.tableData = response.data.list
// console.log(that.tableData,'---that.tableData');
// that.type2name = response.data.type2name
that.total = response.data.total
})
}).catch(error => {
this.tableLoading = false
console.error(error, 'error')
})
that.tableData = [
{
id: 1,
created_at: '张三模拟数据',
age: 25,
email: 'zhangsan@example.com'
},
{
id: 2,
created_at: '李四模拟数据',
age: 30,
email: 'lisi@example.com'
},
// ... 更多数据项
]
that.total = 100 // 总条数，用于分页组件显示总页数
setTimeout(() => {
that.tableLoading = false
}, 1000)
// this.$http('POST', '/supernew/ajax_get_stage_purchase', {
// type: 0,
// cur_page: 1,
// page_size: 5,
// }, {
// headers: {
// 'AUTH': '3c901fa4a19a7ad9d01238890863d499'
// }
// }).then(response => {
// this.tableLoading = false
// this.$nextTick(() => {
// that.tableData = response.data.list
// // console.log(that.tableData,'---that.tableData');
// // that.type2name = response.data.type2name
// that.total = response.data.total
// })
// }).catch(error => {
// this.tableLoading = false
// console.error(error, 'error')
// })
},
btnClick() {
@ -1266,7 +1305,7 @@ export default {
return randomNumber
},
onSwitchChange(value) {
console.log('Switch/ 状态变化:',this.switchValue, value);
console.log('Switch/ 状态变化:', this.switchValue, value);
// console.log('Switch 状态变化:',this.form.switchValue2,this.form.switchValue3, value);
},
onSwitchChange1(value) {
@ -1290,22 +1329,22 @@ export default {
// // 隐藏所有tooltip
// this.$hideAllPositionMessages()
},
openDialog6(){
openDialog6() {
this.tooltip.hide()
},
openDialog3(el,pos){
openDialog3(el, pos) {
// type属性可更换
this.$positionMessage({
duration:3000,
duration: 3000,
type: 'success',
message: '操作成功',
target: this.$refs[el], // 可以是DOM元素或选择器
position: pos // 或 'bottom'
}) // 3秒后自动隐藏（可选）
console.log(this.tooltip,'tooltip',el,pos);
console.log(this.tooltip, 'tooltip', el, pos);
},
openDialog4(el){
openDialog4(el) {
// 一直显示
this.tooltip = this.$positionMessage({
type: 'info',
@ -1314,7 +1353,7 @@ export default {
duration: 0 // 0表示一直显示
})
},
openDialog5(){
openDialog5() {
this.tooltip.updateMessage('更新后的文本内容----')
},
// 确认按钮事件
@ -1368,8 +1407,8 @@ export default {
radioChange(data) {
console.log(data, 'radio--data');
},
selectChangeTest(val){
console.log(val,'select-----选中的',this.form.card,this.form.card1);
selectChangeTest(val) {
console.log(val, 'select-----选中的', this.form.card, this.form.card1);
},
handleClick(row) {
console.log(row);
@ -1451,7 +1490,7 @@ export default {
}
</script>
<style lang="scss" scoped>
.shortLine{
.shortLine {
width: 100%;
margin: 20px 0;
height: 18px;
@ -1459,6 +1498,7 @@ export default {
text-align: center;
background-color: antiquewhite;
}
.elementWrap {
/* width: 100%; */
padding: 30px 40px;
@ -1568,9 +1608,25 @@ export default {
background: linear-gradient(290deg, #FF4143 4%, #FF768B 92%);
}
}
.btns{
.btns {
display: flex;
justify-content: flex-end;
align-items: center;
}
.demo-section {
margin: 30px 0;
padding: 20px;
border: 1px solid #eee;
border-radius: 4px;
h2 {
text-align: left;
color: #333;
margin: 0;
padding-bottom: 10px;
border-bottom: 1px solid #f0f0f0;
}
}
</style>

21
src/views/super/paiban/college.vue
View File

@ -5,9 +5,21 @@
<div class="flex-between">
<div class="flex filter-area">
<label for="">收录申请</label>
<GuipSelect width="150px" clearable label="状态" :options="['麻辣烫','提拉米苏']" v-model="review_status" />
<GuipSelect width="150px" clearable label="学历" :options="['麻辣烫','提拉米苏']" v-model="degree" />
<GuipInput ref="GuipInput" label="学校" placeholder="输入学校名称" v-model="school" />
<GuipSelect width="180px" clearable label="状态" :options="statusList" :extraItem="{ label: '不限', value: -1 }" v-model="review_status" @change="getList"/>
<GuipSelect width="180px" clearable label="学历" :options="['麻辣烫','提拉米苏']" v-model="degree" @change="getList"/>
<GuipFormItem label="学校">
<SchoolAutoComplete
slot="formDom"
v-model="schoolName"
url="/supernew/ajax_get_paiban_schools"
:selected-school-id="school"
@select="handleSchoolSelect"
@clear="handleSchoolClear"
placeholder="请输入学校名称"
style="width: 300px;"
/>
</GuipFormItem>
</div>
<GuipButton>收录成功通知</GuipButton>
</div>
@ -53,7 +65,6 @@
import GuipButton from "@/components/GuipButton.vue";
import GuipTable from "@/components/GuipTable.vue";
import GuipSelect from "@/components/GuipSelect.vue";
import GuipInput from "@/components/GuipInput.vue";
import GuipDialog from "@/components/GuipDialog.vue";
import GuipTextarea from "@/components/GuipTextarea.vue";
@ -61,7 +72,7 @@ export default {
components: {
GuipTextarea,
GuipDialog,
GuipInput, GuipSelect,
GuipSelect,
GuipTable,
GuipButton,

Write Preview
Loading…
Cancel
Save