longlong/xw_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

自定义时间选择、多选下拉组件

Browse Source
This commit is contained in:
龙运模
2024-07-11 20:40:29 +08:00
parent 8cb52b4cad
commit 784be21ad3
10 changed files with 265 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/login/components/commonPage.vue
+5 -2
View File
@@ -12,7 +12,7 @@
<router-link to="/login">返回登录</router-link>
</div>
</el-header>
<el-main>
<el-main class="registerView">
<div class="common-container">
<h2 class="common-title">{{title}}</h2>
<div class="common-main el-card">
@@ -31,5 +31,8 @@
}
</script>
<style>
<style lang="scss" scoped>
.registerView{
background: #F6F8F9;
}
</style>
src/views/login/userRegister.vue
+62 -64
View File
@@ -1,59 +1,51 @@
<template>
<common-page title="注册新账号">
<common-page title="注册">
<el-steps :active="stepActive" simple finish-status="success">
<el-step title="基础信息" />
<el-step title="详细信息" />
<el-step title="完成注册" />
<el-step title="创建账户" />
<el-step title="填写信息" />
<el-step title="注册完成" />
</el-steps>
<el-form v-if="stepActive==0" ref="stepForm_0" :model="form" :rules="rules" :label-width="120">
<el-form-item label="登录账号" prop="user">
<el-input v-model="form.user" placeholder="请输入登录账号"></el-input>
<div class="el-form-item-msg">登录账号将作为登录时的唯一凭证</div>
</el-form-item>
<el-form-item label="登录密码" prop="password">
<el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input>
<sc-password-strength v-model="form.password"></sc-password-strength>
<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
</el-form-item>
<el-form-item label="确认密码" prop="password2">
<el-input v-model="form.password2" type="password" show-password placeholder="请再一次输入登录密码"></el-input>
</el-form-item>
<el-form-item label="" prop="agree">
<el-checkbox v-model="form.agree" label="">已阅读并同意</el-checkbox><span class="link" @click="showAgree=true">《平台服务协议》</span>
</el-form-item>
</el-form>
<el-form v-if="stepActive==1" ref="stepForm_1" :model="form" :rules="rules" :label-width="120">
<el-form-item label="真实姓名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入真实姓名"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-form v-if="stepActive==0" ref="stepForm_0" :model="form" :rules="rules" label-position="top">
<el-form-item label="电子邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
</el-form-item>
<el-form-item label="账号类型" prop="userType">
<el-radio-group v-model="form.userType">
<el-radio-button label="1">企业开发者</el-radio-button>
<el-radio-button label="2">企业开发者</el-radio-button>
</el-radio-group>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item label="开通类别" prop="open">
<el-checkbox-group v-model="form.open">
<el-checkbox label="1">云存储API</el-checkbox>
<el-checkbox label="2">云检索API</el-checkbox>
<el-checkbox label="3">Javescript API</el-checkbox>
</el-checkbox-group>
<el-form-item label="验证码" prop="verify_code">
<el-row justify="space-between" style="width: 100%">
<el-col :span="17">
<el-form-item>
<el-input v-model="form.verify_code" placeholder="请输入验证码"></el-input>
</el-form-item>
</el-col>
<el-col :span="7" align="right">
<el-button @click="getYzm" type="primary" :disabled="disabled">获取验证码 <span v-if="disabled"> ({{ time }})</span></el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
<el-form v-if="stepActive==1" ref="stepForm_1" :model="form" :rules="rules" label-position="top">
<el-form-item label="公司名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入真实姓名"></el-input>
</el-form-item>
<el-form-item label="客户名称" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
</el-form-item>
</el-form>
<div v-if="stepActive==2">
<el-result icon="success" title="注册成功" sub-title="可以使用登录账号以及手机号登录系统">
<el-result icon="success" title="账号注册成功" sub-title="可以使用登录账号以及手机号登录系统">
<template #extra>
<el-button type="primary" @click="goLogin">前去登录</el-button>
<p class="activation" @click="goLogin">激活邮箱</p>
</template>
</el-result>
</div>
<el-form style="text-align: center;">
<el-button v-if="stepActive>0 && stepActive<2" @click="pre">上一步</el-button>
<el-button v-if="stepActive<1" type="primary" @click="next">下一步</el-button>
<el-button v-if="stepActive==1" type="primary" @click="save">提交</el-button>
<div class="btnBox">
<el-button class="btn" v-if="stepActive<2" type="primary" @click="next" style="width: 100%;">下一步</el-button>
<el-button class="btn" v-if="stepActive>0 && stepActive<2" @click="pre" style="width: 100%;">上一步</el-button>
<el-button class="btn" v-if="stepActive==2" type="primary" @click="save" style="width: 100%;">完成</el-button>
</div>
</el-form>
<el-dialog v-model="showAgree" title="平台服务协议" :width="800" destroy-on-close>
平台服务协议
@@ -76,35 +68,33 @@
},
data() {
return {
disabled:false,
time:60,
stepActive: 0,
showAgree: false,
form: {
email: "",
mobile:"",
verify_code:"",
user: "",
password: "",
password2: "",
agree: false,
userName: "",
email: "",
userType: "1",
open: []
},
rules: {
user: [
{ required: true, message: '请输入账号名'}
email: [
{ required: true, message: '请输入邮箱地址'}
],
password: [
{ required: true, message: '请输入密码'}
mobile: [
{ required: true, message: '请输入手机号'}
],
password2: [
{ required: true, message: '请再次输入密码'},
{validator: (rule, value, callback) => {
if (value !== this.form.password) {
callback(new Error('两次输入密码不一致'));
}else{
callback();
}
}}
verify_code: [
{ required: true, message: '请输入验证码'}
],
agree: [
{validator: (rule, value, callback) => {
if (!value) {
@@ -117,9 +107,7 @@
userName: [
{ required: true, message: '请输入真实姓名'}
],
email: [
{ required: true, message: '请输入邮箱地址'}
],
userType: [
{ required: true, message: '请选择账户类型'}
],
@@ -133,6 +121,9 @@
},
methods: {
getYzm(){
},
pre(){
this.stepActive -= 1
},
@@ -165,7 +156,14 @@
}
</script>
<style scoped>
<style scoped lang="scss">
.activation{
color: var(--el-color-primary);
}
.btnBox{
display: flex;align-items: center;
.btn{
flex: 1;
}
}
</style>
src/views/setting/company/index.vue
+16 -7
View File
@@ -13,13 +13,13 @@
<div class="searchMain searchMainNoTop">
<div class="searchItem">
<label class="name">开通日期</label>
<el-date-picker class="input" type="daterange" :size="size" v-model="params.activation_date" :popper-options="{ placement: 'bottom-start' }" start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
<scDatePicker :size="size" v-model:activation_date="params.activation_date" start-placeholder="开始日期" end-placeholder="结束日期"></scDatePicker>
</div>
<div class="searchItem">
<label class="name">公司名称</label>
<el-select class="input" :size="size" v-model="params.id" @visible-change="getCompanyList" placeholder="请选择公司名称" filterable clearable>
<scMultipleSelect :size="size" v-model:select_params="params.id" @fetchData="getCompanyList" placeholder="请选择公司名称" multiple collapse-tags filterable clearable>
<el-option v-for="item in setMap.full_name" :key="item" :label="item.full_name" :value="item.id"></el-option>
</el-select>
</scMultipleSelect>
</div>
<div class="searchItem">
<label class="name">状态</label>
@@ -96,10 +96,13 @@ export default {
selection: [],
params: {
activation_date: {
operator:'in',
operator:'between',
value:[]
},
id:{
operator:"in",
value:[]
},
id:'',
active_status:'',
}
}
@@ -201,8 +204,14 @@ export default {
},
reset(){
this.params = {
activation_date: '',
id:'',
activation_date: {
operator:'between',
value:[]
},
id:{
operator:"in",
value:[]
},
active_status:'',
};
this.$refs.table.reload();