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-12 17:46:32 +08:00
parent d6ad74cbb5
commit cfe3bba57f
8 changed files with 254 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/scDatePicker/index.vue
View File

@ -8,7 +8,10 @@
<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>
<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
:default-time="defaultTime"
></el-date-picker>
</div>
</template>
@ -37,6 +40,7 @@ export default {
data(){
return{
localDatePicker:[],
defaultTime:[new Date(2000, 1, 1, 0, 0, 0),new Date(2000, 1, 1, 23, 59, 59)]
}
},
mounted() {

59
src/components/scInput/index.vue Normal file
View File

@ -0,0 +1,59 @@
<!--
* @Descripttion: 关键字组件
* @Author: 龙运模
* @Date: 2024年07月11日
* @LastEditors: 龙运模
* @LastEditTime:
-->
<template>
<div class="scDatePicker">
<el-input v-bind="$attrs" class="input" v-model="localText" @input="textChange" :size="size" :placeholder="placeholder" clearable></el-input>
</div>
</template>
<script>
export default {
name: "index",
props:{
activation_text: {
type: String,
default: ""
},
size:{ type: String, default: "small" },
placeholder:{type:String, default:"请输入关键字"},
},
watch:{
activation_text:{
handler(val){
this.localText = val;
},
deep:true
}
},
data(){
return{
localText:this.activation_text,
}
},
mounted() {
},
methods:{
textChange(e){
this.localText = e;
this.emitActivationText();
},
emitActivationText() {
this.$emit('update:activation_text', this.localText);
this.$emit('fetchData');
}
}
}
</script>
<style scoped lang="scss">
.scDatePicker{
width: 100%;
}
</style>

8
src/components/scMultipleSelect/index.vue
View File

@ -18,7 +18,7 @@
export default {
name: "index",
props:{
select_params: {
activation_select: {
type: Object,
default: () => ({ operator: "in", value: [] })
},
@ -26,7 +26,7 @@ export default {
placeholder:{type:String, default:"请选择"},
},
watch:{
select_params:{
activation_select:{
handler(val){
if(!val || val.value.length == 0){
this.localData = [];
@ -52,8 +52,8 @@ export default {
this.emitActivationSelect();
},
emitActivationSelect() {
this.$emit('update:select_params', {
operator: this.select_params.operator,
this.$emit('update:activation_select', {
operator: this.activation_select.operator,
value: this.localData? this.localData:[]
});
}

137
src/components/scSearch/index.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<div v-for="item in columnList" :key="item">
<div class="searchItem" v-if="item.type == 'date'">
<label class="name">{{item.name}}</label>
<scDatePicker :size="size" v-model:activation_date="params.activation_date" start-placeholder="开始日期" end-placeholder="结束日期"></scDatePicker>
</div>
<div class="searchItem" v-if="item.type =='multiple'">
<label class="name">{{item.name}}</label>
<scMultipleSelect :size="size" v-model:activation_select="params.id" @fetchData="getSelect(item,$event)" :placeholder="item.placeholder" multiple collapse-tags filterable clearable>
<el-option v-for="em in item.data" :key="em" :label="em.full_name" :value="em.id"></el-option>
</scMultipleSelect>
</div>
<div class="searchItem" v-if="item.type == 'select'">
<label class="name">{{item.name}}</label>
<el-select class="input" :size="size" v-model="params.active_status" @visible-change="getSelect(item,$event)" :placeholder="item.placeholder" filterable clearable>
<el-option v-for="em in item.data" :key="em" :label="em.label" :value="em.active_status"></el-option>
</el-select>
</div>
<div class="searchItem" v-if="item.type == 'text'">
<label class="name">{{item.name}}</label>
<scInput class="input" v-model:activation_text="keywordParams" @fetchData="getText(item,$event)" :placeholder="item.placeholder" :size="size"></scInput>
</div>
</div>
</template>
<script>
export default {
name: "index",
emits: ['fetchSelectData'],
props:{
searchList:{type: Array},
},
watch:{
searchList:{
handler(val){
if(val && val.length>0){
this.params = this.groupByType(val);
}
},
immediate:true,
},
keywordParams:{
handler(val) {
for(let i in this.params){
if(this.params[i].keyword){
this.params[i].value = val===""?"":'%'+val+'%';
}
}
},
immediate:true
}
},
data(){
return{
size:"small",
columnList:this.searchList,
selectItem:'',
selectShow:false,
params:{},
keywordParams:"",
}
},
mounted() {
},
methods:{
getSelect(item,e){
if(!e) return
this.$emit('fetchSelectData',{data:item,params:this.params});
},
getText(item){
this.$emit('fetchSelectData',{data:item,params:this.params});
},
reload(){
this.keywordParams = "";
for(let i in this.params){
if(typeof this.params[i] === "object" && this.params[i] !=null){
if(typeof this.params[i].value == "string"){
this.params[i].value = "";
}else{
this.params[i].value = [];
}
}else{
this.params[i] = "";
}
}
},
groupByType(list){
const grouped = {};
list.forEach(item=>{
if (!grouped[item.code]) {
if(typeof item.code == 'string'){
grouped[item.code] = {};
}
}
if (item.type === 'text') {
item.code.forEach(code => {
if(!grouped[code]){
grouped[code] = {};
}
let params = {};
if(item.keyword){
params = {
keyword:true,
operator:'like',
value:""
}
}else{
params = {
operator:'like',
value:""
}
}
grouped[code] = params;
});
} else {
let operator = item.type == 'date'?'between':item.type == 'multiple'?'in':item.type == 'text'?'link':'';
let params = {
operator:operator,
value:operator=='link'?"":[]
}
grouped[item.code] = operator==''?"":params;
}
})
return grouped
},
}
}
</script>
<style scoped lang="scss">
</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

@ -23,6 +23,8 @@ import ossImgUpload from "./components/scUpload/uploadImg";
import ossImgListUpload from "./components/scUpload/uploadListImg";
import scDatePicker from "./components/scDatePicker";
import scMultipleSelect from "./components/scMultipleSelect";
import scInput from "./components/scInput";
import scSearch from "./components/scSearch";
import scStatusIndicator from './components/scMini/scStatusIndicator'
import scTrend from './components/scMini/scTrend'
@ -70,6 +72,8 @@ export default {
app.component('ossImgListUpload', ossImgListUpload);
app.component('scDatePicker', scDatePicker);
app.component('scMultipleSelect', scMultipleSelect);
app.component('scInput', scInput);
app.component('scSearch', scSearch);
//注册全局指令
app.directive('auth', auth)

93
src/views/setting/company/index.vue
View File

@ -6,27 +6,13 @@
<el-button type="primary" :size="size" plain>批量导入</el-button>
</div>
<div class="right-panel">
<el-button :size="size" icon="sc-icon-Download">下载</el-button>
</div>
</el-header>
<el-main class="nopadding">
<div class="searchMain searchMainNoTop">
<div class="searchItem">
<label class="name">开通日期</label>
<scDatePicker :size="size" v-model:activation_date="params.activation_date" start-placeholder="开始日期" end-placeholder="结束日期"></scDatePicker>
</div>
<div class="searchItem">
<label class="name">公司名称</label>
<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>
</scMultipleSelect>
</div>
<div class="searchItem">
<label class="name">状态</label>
<el-select class="input" :size="size" v-model="params.active_status" @visible-change="getStatusList" placeholder="请选择状态" filterable clearable>
<el-option v-for="item in setMap.active_status" :key="item" :label="item.label" :value="item.active_status"></el-option>
</el-select>
</div>
<scSearch ref="scSearch" :searchList="searchList" @fetchSelectData="getSelectData"></scSearch>
<div class="searchItem searchBtn">
<el-button :size="size" type="primary" icon="el-icon-search" @click="upSearch">查询</el-button>
<el-button :size="size" type="info" icon="el-icon-RefreshRight" @click="reset">重置</el-button>
@ -36,7 +22,7 @@
<el-table-column type="selection" align="center" width="40"></el-table-column>
<sc-table-column label="序号" align="center" type="index"></sc-table-column>
<template #logo="scope">
<el-image class="logoCell" :src="scope.row.logo" fit="contain"></el-image>
<el-image class="logoCell" :src="scope.row.logo" preview-teleported :preview-src-list="[scope.row.logo]" fit="contain"></el-image>
</template>
<template #active_status="scope">
<el-switch :size="size" v-model="scope.row.active_status" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_status" :active-value="true" :inactive-value="false"></el-switch>
@ -80,11 +66,6 @@ export default {
data() {
return {
size:'small',
setMap:{
full_name:[],
active_status:[],
},
dialog: {
save: false,
show: false
@ -94,32 +75,44 @@ export default {
column: [],
},
selection: [],
params: {
activation_date: {
operator:'between',
value:[]
},
id:{
operator:"in",
value:[]
},
active_status:'',
}
searchList:[
{name:'开通日期',type:'date',code:'activation_date'},
{name:'公司名称',type:'multiple',code:'id', data:[], placeholder:"请选择公司名称",},
{name:'状态',type:'select',code:'active_status', data:[], placeholder:"请选择状态",},
{name:'关键字',type:'text',code:['domain','name','address','owner','mobile'],keyword:true},
],
params: {},
}
},
methods: {
async getCompanyList(e) {
if(!e) return
const res = await this.$API.system.company.select.post(this.params);
if(res.code == 200){
this.setMap['full_name'] = res.data;
getSelectData(item){
let {data,params} = item;
this.params = params;
if(data.code == "id"){
this.getCompanyList(data,params)
}else if(data.code == "active_status"){
this.getStatusList(data,params);
}
},
async getStatusList(e) {
if(!e) return
const res = await this.$API.oss.status.post(this.params);
async getCompanyList(data,params) {
const res = await this.$API.system.company.select.post(params);
if(res.code == 200){
this.setMap['active_status'] = res.data;
this.searchList.forEach(item=>{
if(item.code == data.code){
item.data = res.data;
}
})
}
},
async getStatusList(data,params) {
const res = await this.$API.oss.status.post(params);
if(res.code == 200){
this.searchList.forEach(item=>{
if(item.code == data.code){
item.data = res.data;
}
})
}
},
@ -203,20 +196,10 @@ export default {
this.$refs.table.upData(this.params);
},
reset(){
this.params = {
activation_date: {
operator:'between',
value:[]
},
id:{
operator:"in",
value:[]
},
active_status:'',
};
this.params = {};
this.$refs.scSearch.reload();
this.$refs.table.reload();
},
handleSaveSuccess(){
this.$refs.table.refresh();
},

10
src/views/setting/company/save.vue
View File

@ -50,8 +50,8 @@
</el-col>
</el-row>
</el-form-item>
<el-form-item label="账号" prop="admin_access">
<el-input v-model="form.admin_access" placeholder="请填写管理员账号"></el-input>
<el-form-item label="账号" prop="admin_account">
<el-input v-model="form.admin_account" placeholder="请填写管理员账号"></el-input>
</el-form-item>
<el-form-item label="登录密码" prop="password" v-if="mode == 'add'">
<el-input v-model="form.password" type="password" placeholder="请填写密码"></el-input>
@ -106,7 +106,7 @@ export default {
doc_url:[],
owner:"",
mobile:"",
admin_access:"",
admin_account:"",
password:"",
remark: "",
accord:1
@ -140,7 +140,7 @@ export default {
owner:[
{required: true, message: '负责人不能为空', trigger: 'blur'}
],
admin_access: [
admin_account: [
{required: true, message: '账号不能为空', trigger: 'blur'}
],
password: [
@ -212,7 +212,7 @@ export default {
this.form.doc_url = res.data.doc_attach && res.data.doc_attach.length>0?res.data.doc_attach.map(em=>em.doc_url):[];
this.form.owner = res.data.owner;
this.form.mobile = res.data.mobile;
this.form.admin_access = res.data.admin_access;
this.form.admin_account = res.data.admin_account;
this.form.password = res.data.password;
this.form.remark = res.data.remark;
this.form.accord = 1;