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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/scDatePicker/index.vue Normal file
View File

@ -0,0 +1,64 @@
<!--
* @Descripttion: 日期选择组件
* @Author: 龙运模
* @Date: 2024年07月11日
* @LastEditors: 龙运模
* @LastEditTime:
-->
<template>
<div class="scDatePicker">
<el-date-picker v-bind="$attrs" class="input" v-model="localDatePicker" @change="dateChange" @input="emitActivationDate" type="daterange" :size="size" :popper-options="{ placement: 'bottom-start' }" :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" clearable></el-date-picker>
</div>
</template>
<script>
export default {
name: "index",
props:{
activation_date: {
type: Object,
default: () => ({ operator: "between", value: [] })
},
size:{ type: String, default: "small" },
startPlaceholder:{type:String, default:""},
endPlaceholder:{type:String, default:""}
},
watch:{
activation_date:{
handler(val){
if(!val || val.value.length == 0){
this.localDatePicker = [];
}
},
deep:true
}
},
data(){
return{
localDatePicker:[],
}
},
mounted() {
},
methods:{
dateChange(e){
this.localDatePicker = e;
this.emitActivationDate();
},
emitActivationDate() {
this.$emit('update:activation_date', {
operator: this.activation_date.operator,
value: this.localDatePicker && this.localDatePicker.length > 0? this.localDatePicker.map(date => this.$TOOL.getTime(date)):[]
});
}
}
}
</script>
<style scoped lang="scss">
.scDatePicker{
width: 100%;
}
</style>

72
src/components/scMultipleSelect/index.vue Normal file
View File

@ -0,0 +1,72 @@
<!--
* @Descripttion: 多选框组件
* @Author: 龙运模
* @Date: 2024年07月11日
* @LastEditors: 龙运模
* @LastEditTime:
-->
<template>
<div class="scSelect">
<el-select v-bind="$attrs" v-model="localData" class="input" :size="size" @visible-change="getDataList" @change="selectChange" :placeholder="placeholder" clearable>
<slot></slot>
</el-select>
</div>
</template>
<script>
export default {
name: "index",
props:{
select_params: {
type: Object,
default: () => ({ operator: "in", value: [] })
},
size:{ type: String, default: "small" },
placeholder:{type:String, default:"请选择"},
},
watch:{
select_params:{
handler(val){
if(!val || val.value.length == 0){
this.localData = [];
}
},
deep:true
}
},
data(){
return{
localData:[],
}
},
mounted() {
},
methods:{
getDataList(val){
this.$emit('fetchData',val);
},
selectChange(e){
this.localData = e;
this.emitActivationSelect();
},
emitActivationSelect() {
this.$emit('update:select_params', {
operator: this.select_params.operator,
value: this.localData? this.localData:[]
});
}
}
}
</script>
<style scoped lang="scss">
.scSelect{
width: 100%;
height: 100%;
:deep(.el-input){
height: 28px;
}
}
</style>

4
src/layout/index.vue
View File

@ -55,8 +55,8 @@
<header class="adminui-header">
<div class="adminui-header-left">
<div class="logo-bar">
<img class="logo" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">
<!-- <span>{{ $CONFIG.APP_NAME }}</span>-->
<!-- <img class="logo" src="https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/login_logo.png">-->
<span>{{ $CONFIG.APP_NAME }}</span>
</div>
<Topbar v-if="!ismobile"></Topbar>
</div>

4
src/scui.js
View File

@ -21,6 +21,8 @@ import scWaterMark from './components/scWaterMark'
import scQrCode from './components/scQrCode'
import ossImgUpload from "./components/scUpload/uploadImg";
import ossImgListUpload from "./components/scUpload/uploadListImg";
import scDatePicker from "./components/scDatePicker";
import scMultipleSelect from "./components/scMultipleSelect";
import scStatusIndicator from './components/scMini/scStatusIndicator'
import scTrend from './components/scMini/scTrend'
@ -66,6 +68,8 @@ export default {
app.component('scTrend', scTrend);
app.component('ossImgUpload', ossImgUpload);
app.component('ossImgListUpload', ossImgListUpload);
app.component('scDatePicker', scDatePicker);
app.component('scMultipleSelect', scMultipleSelect);
//注册全局指令
app.directive('auth', auth)

8
src/style/pages.scss
View File

@ -32,10 +32,10 @@
.common-header-right {display: flex;align-items: center;}
.common-header-right a {font-size: 14px;color: var(--el-color-primary);cursor: pointer;}
.common-header-right a:hover {color: var(--el-color-primary-light-3);}
.common-container {max-width: 1240px;margin:30px auto 30px auto;}
.common-main {padding:20px;}
.common-title {font-size: 26px;margin-bottom: 20px;font-weight: normal;}
.common-main .el-form {width: 500px;margin:30px auto;}
.common-container {max-width: 1200px;margin:30px auto 30px auto;}
.common-main {padding:20px;border:0;}
.common-title {font-size: 24px;margin-bottom: 20px;font-weight: normal;}
.common-main .el-form {width: 420px;margin:30px auto;}
.common-main .el-steps .el-step__title {font-size: 14px;}
.common-main .el-steps .el-step__icon {border: 1px solid;}
.common-main .yzm {display: flex;width: 100%;}

9
src/utils/tool.js
View File

@ -148,7 +148,7 @@ tool.objCopy = function (obj) {
/* 日期格式化 */
tool.dateFormat = function (date, fmt='yyyy-MM-dd hh:mm:ss') {
date = new Date(date)
var o = {
const o = {
"M+": date.getMonth() + 1, // 月份
"d+": date.getDate(), // 日
"h+": date.getHours(), // 小时
@ -160,7 +160,7 @@ tool.dateFormat = function (date, fmt='yyyy-MM-dd hh:mm:ss') {
if(/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
for(let k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
@ -168,6 +168,11 @@ tool.dateFormat = function (date, fmt='yyyy-MM-dd hh:mm:ss') {
return fmt;
}
tool.getTime = function (date){
date = new Date(date);
return Math.floor(date.getTime() / 1000);
}
/* 千分符 */
tool.groupSeparator = function (num) {
num = num + '';

7
src/views/login/components/commonPage.vue
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>

126
src/views/login/userRegister.vue
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>

23
src/views/setting/company/index.vue
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();