This commit is contained in:
ln1778 2024-09-10 10:09:09 +08:00
parent b74f0ca3fc
commit e2c28f3bf2
11 changed files with 44263 additions and 66 deletions

View File

@ -2,7 +2,7 @@
"name": "ag-element-ui",
"version": "0.1.0",
"private": true,
"main": "./main.js",
"main": "lib/ag-element-ui.common.js",
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",

View File

@ -6,4 +6,4 @@ agDatePicker.install = function (Vue) {
}
// 导出组件
export default agDatePicker
export default agDatePicker;

View File

@ -14,14 +14,11 @@
/>
</template>
<script>
/**
* agDatePicker 时间选择器
*/
<script>
import isEmpty from "../../../src/utils/isEmpty";
export default {
name: "agDatePicker",
name: "AgDatePicker",
props: {
range:false,
showTime:false,

View File

@ -5,7 +5,7 @@
<el-form-item v-bind="item" :prop="item.enName" >
<slot :name="item.enName">
<ag-input v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input'"></ag-input>
<agDatePicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'"/>
<ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'"/>
<agSelect v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" />
<el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" >
<el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio>

View File

@ -1,14 +1,14 @@
<template>
<div class="ag-MultifunctionSearch">
<div class="ag-MultifunctionSearch">
<ag-select
v-bind="$attrs"
v-on="listeners"
:value="values&&values[0]"
@change="onSelect"
class="ag_select_group"
:style="{ width: `${swidth}px` }"
>
</ag-select>
v-bind="$attrs"
v-on="listeners"
:value="values&&values[0]"
@change="onSelect"
class="ag_select_group"
:style="{ width: `${swidth}px` }"
>
</ag-select>
<ag-input
v-if="!showExtra"
class="ag_input_group"
@ -20,6 +20,9 @@
@input="onInputChange"
>
<template slot="prefix" >
</template>
</ag-input>
<el-popover
v-if="showExtra"
@ -244,6 +247,44 @@ export default {
}
::v-deep{
.ag_select_group{
.el-input__inner{
border:1px solid #e5e5e5;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
outline:none;
&:focus{
border-color:#e5e5e5;
}
}
}
.ag_input_group{
.el-input__inner{
border:1px solid #e5e5e5;
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left:none;
outline:none;
&:focus{
border-color:#e5e5e5;
}
}
}
.el-select{
.el-input{
&.is-focus{
.el-input__inner{
border-color:#e5e5e5;
}
}
}
&:hover{
.el-input__inner{
border-color:#e5e5e5;
}
}
}
.el-textarea__inner{
border:none;
}

View File

@ -0,0 +1,9 @@
import agMutionCheckbox from './src';
// 为组件提供 install 安装方法,供按需引入
agMutionCheckbox.install = function (Vue) {
Vue.component(agMutionCheckbox.name, agMutionCheckbox);
}
// 导出组件
export default agMutionCheckbox;

View File

@ -0,0 +1,357 @@
<template>
<div class="ag-multion-checkbox">
<el-dropdown
size="small"
trigger="click"
ref="multioncheckref"
@click.native="checkeddown"
:class="{ 'el-dropdown_active': !down }"
@visible-change="dropdownchange"
>
<span class="el-dropdown-link">
<span>
<span :class="{ color: checkedList.length }">{{ dropdownvalue }}</span
><span class="list-length" v-if="valuelength >= 1"
>+ {{ valuelength }}</span
></span
><i
v-if="dropdownvalue == ''"
class="el-icon-arrow-up el-icon--right"
:class="{ 'rotate-arrow': down }"
></i>
<i v-else class="el-icon-close el-icon--right" @click="clear"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-input
placeholder="请输入内容"
v-model="seek"
size="small"
class="el_input"
@input="inputblur"
@keydown.enter.prevent="confirm()"
>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
<div v-if="dataList && dataList.length" class="checkbox-group">
<div v-if="dataList && dataList.length > 1" class="all-checked">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选</el-checkbox
>
/
<span class="invertstatus" @click="handleCheckAllChange(!checkAll)">反选</span>
</div>
<el-checkbox-group
class="checked-list"
:class="{ 'top-height': dataList && dataList.length <= 1 }"
v-model="checkedList"
@change="handleCheckedCitiesChange"
>
<div v-for="(el, id) in dataList" :key="id" class="setScore">
<el-checkbox :label="el.value">{{ el.label }}</el-checkbox>
<span @click="confirm(el, 'only')">仅筛选此项</span>
</div>
</el-checkbox-group>
</div>
<div v-else class="nothing">暂无数据</div>
<div class="btnbox">
<div>
<el-button size="mini" @click="cancel">取消</el-button>
<el-button size="mini" type="primary" plain @click="confirm()"
>确定</el-button
>
</div>
</div>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
export default {
props: ["datas", "placeholder", "value"],
name: "AgMutionCheckbox",
data() {
return {
seek: "",
dropdownvalue:"",
valuelength: 0,
down: true,
checkAll: false,
checkedList: [],
dataList: [
], //
isIndeterminate: false,
retract: false,
olddatas:[
{label:"方法1",value:"1"},
{label:"方法2",value:"2"}
]
};
},
mounted() {
if(this.datas&&Array.isArray(this.datas)){
this.dataList = this.datas;
this.olddatas=Object.assign([],this.datas);
this.checkedList = []; //-
if (this.checkAll && this.dataList) {
this.checkedList=this.dataList.map((e) =>e.value);
this.confirm();
}
if(this.value){
this.checkedList=this.value;
}
}else{
this.olddatas=Object.assign([],this.dataList);
}
},
watch: {
datas: {
handler(val) {
if(val&&Array.isArray(val)){
this.dataList = val;
this.olddatas=Object.assign([],val);
this.checkedList = []; //-
if (this.checkAll&&this.dataList) {
this.checkedList=this.dataList.map((e) =>e.value);
this.confirm();
}
if(this.value){
this.checkedList=this.value;
}
} else{
this.olddatas=Object.assign([],this.dataList);
}
},
deep: true,
immediate: true,
},
},
methods: {
clear(){
this.checkedList = [];
this.isIndeterminate = false;
this.checkAll=false;
},
checkeddown(val){
console.log(val,"val")
},
dropdownchange(){
this.down = !this.down;
},
inputblur(val){
this.dataList=this.olddatas.filter((f)=>f.label.indexOf(val)>-1);
},
handleCheckAllChange(val){
this.checkedList = val ? this.olddatas.map((h)=>h.value) : [];
this.isIndeterminate = false;
this.checkAll=val;
},
confirm(e){
if(e&&e.label=="only"){
const filters=this.olddatas.filter((f)=>{
return e.value.find((c)=>c==f.value);
});
const [onedatas,...otherdatas]=filters;
this.valuelength=otherdatas.length;
this.dropdownvalue=onedatas.label;
if(this.$listeners.onSearch){
this.$emit("onSearch",[e.value]);
}
}else{
const filters=this.olddatas.filter((f)=>{
return this.checkedList.find((c)=>c==f.value);
});
const [onedatas,...otherdatas]=filters;
this.valuelength=otherdatas.length;
this.dropdownvalue=onedatas.label;
if(this.$listeners.onSearch){
this.$emit("onSearch",this.checkedList);
}
}
this.$refs.multioncheckref.hide();
},
handleCheckedCitiesChange(val){
if(val.length>0){
if(val.length==this.olddatas.length){
this.isIndeterminate = false;
this.checkAll=true;
}else{
this.isIndeterminate = true;
}
}else{
this.isIndeterminate = false;
this.checkAll=false;
}
},
cancel(){
this.$refs.multioncheckref.hide();
}
}
};
</script>
<style lang="scss" scoped>
::v-deep .el_input {
padding: 0 10px;
.el-input__inner {
border-radius: 0px;
border: none;
border-bottom: 1px solid #dcdfe6;
}
.el-input__inner:hover {
border-bottom: 1px solid #409eff;
}
}
.el-dropdown {
width: 100%;
height: 32px;
line-height: 32px;
border: 1px solid #dcdfe6;
border-radius: 4px;
}
.el-dropdown:hover {
border: 1px solid #c0c4cc;
}
.el-dropdown_active {
border: 1px solid #409eff;
}
.el-dropdown_active:hover {
border: 1px solid #409eff;
}
.el-icon-arrow-up {
transform: rotate(0deg);
transition: transform 0.3s ease;
}
.rotate-arrow {
transform: rotate(180deg);
transition: transform 0.3s ease;
}
.el-dropdown-menu {
min-width: 400px;
padding: 10px 0 0 0;
}
.checkbox-group {
overflow: hidden;
padding: 5px 0px 0;
box-sizing: border-box;
}
.all-checked {
span {
font-size: 14px;
color: #606266;
font-weight: 500;
cursor: pointer;
}
.invertstatus:hover {
color: #409eff;
}
}
.checked-list {
max-height: 180px;
margin-top:5px;
overflow-y: auto;
padding: 5px 0;
box-sizing: border-box;
}
.top-height {
margin-top: 0px;
}
.el-checkbox-group {
display: flex;
flex-direction: column;
}
.el-checkbox {
margin-right: 0px !important;
padding: 5px 0px 5px 10px;
box-sizing: border-box;
}
.btnbox {
padding: 5px;
display: flex;
justify-content: right;
border-top: 1px solid #dcdfe6;
}
.el-dropdown-link {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
box-sizing: border-box;
width: 100%;
height:100%;
min-width: 180px;
font-size: 13px;
font-weight: 500;
color: #c0c4cc;
cursor: pointer;
}
.list-length {
padding: 3px 7px;
margin-left: 10px;
border-radius: 4px;
color: #33333379;
background-color: #dcdfe6;
}
.color {
color: #333;
font-weight: normal;
}
:focus-visible {
outline: none;
}
.nothing {
min-height: 80px;
line-height: 80px;
text-align: center;
color: #c0c4cc;
}
.el-icon-close {
opacity: 0;
}
.el-icon-close:hover {
opacity: 1;
}
.setScore {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
font-size: 14px;
span {
display: none;
height: 30px;
line-height: 30px;
padding: 0 10px;
cursor: pointer;
}
::v-deep .el-checkbox {
height: 30px;
line-height: 30px;
display: flex;
flex: 1;
align-items: center;
}
}
.setScore:hover {
background-color: rgba(192, 196, 204, 0.267);
span {
display: block;
color: #409eff;
height: 100%;
}
}
</style>

View File

@ -11,6 +11,11 @@
import agPagination from './agPagination';
import agRow from './agRow';
import agCol from './agCol';
import agMutionCheckbox from './agMutionCheckbox';
import agMultifunctionSearch from './agMultifunctionSearch';
import agDatePicker from "./agDatePicker";
import agNumberRange from "./agNumberRange";
// 注册组件
@ -27,7 +32,12 @@ import agCol from './agCol';
agTabs,
agPagination,
agCol,
agRow
agRow,
agDatePicker,
agMutionCheckbox,
agMultifunctionSearch,
agNumberRange
]
// 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册)
@ -35,19 +45,20 @@ import agCol from './agCol';
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
components.forEach(component => {
Vue.component(component.name, component);
});
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
}
export default {
version:'2.15.14',
// 导出的对象必须具有 install才能被 Vue.use() 方法安装
install,
}
export {
// 以下是具体的组件列表
agInput,
agSelect,
@ -60,5 +71,9 @@ import agCol from './agCol';
agTabs,
agPagination,
agCol,
agRow
agRow,
agMutionCheckbox,
agMultifunctionSearch,
agDatePicker,
agNumberRange
}

View File

@ -2,8 +2,9 @@
<div>
<el-button type="success" @click="abb = true">点击打开 Dialog</el-button>
<ag-dialog :visible.sync="abb"> </ag-dialog>
<ag-datePicker v-model="date_value" :showTime="true" :range="true" @change="onPicker">
</ag-datePicker>
<ag-date-picker v-model="date_value" :showTime="true" :range="true" @change="onPicker">
</ag-date-picker>
<ag-input v-model="inputValue" placeholder="请输入" @change="onInputChange" ref="aginputref">
</ag-input>
<ag-select :options="a_options" v-model="value">
@ -27,7 +28,7 @@
</el-form-item>
</el-form>
<ag-MultifunctionSearch
<ag-multifunction-search
size="small"
ref="ttt"
v-model="values"
@ -37,7 +38,8 @@
@change="onInputinput"
@blur="onblur"
>
</ag-MultifunctionSearch>
</ag-multifunction-search>
<ag-color-picker size="small" v-model="colorvalue"/>
<agQuery :inputs="inputs" @onSearch="onSearch"/>
<agTable :columns="columns" :data="tabledata" :currentPage="2" :pageSize="100" :total="500" >
<template #name="{row}">
@ -50,10 +52,10 @@
<agUpdate @onUpload="onUpload" isDrap dragmove multiple :limit="5" @onError="onError" :maxSize="1024*1024" :value="filelist">
<div slot="tip">只能上传jpg/png文件且不超过500kb</div>
</agUpdate>
<ag-form :data="formdata" label-width="120px" label-position="right" v-model="formvalue">
<ag-form :data="formdata" label-width="120px" label-position="right" v-model="formvalue">
</ag-form>
<!-- <el-input
<ag-mution-checkbox :datas="checklist" @onSearch="onCheckSearch"> </ag-mution-checkbox>
<!-- <el-input agMultionCheckbox
size="small"
placeholder="请输入内容"
v-model="value"
@ -72,18 +74,17 @@
<script>
import ElementUI from 'element-ui';
import Vue from 'vue';
import agDialog from "../packages/agDialog/src/index.vue";
import agDatePicker from "../packages/agDatePicker/src/index.vue";
import agDialog from "../packages/agDialog/src/index.vue";
import agInput from "../packages/agInput/src/index.vue";
import agSelect from "../packages/agSelect/src/index.vue";
import agNumberRange from "../packages/agNumberRange/src/index.vue";
import agCascadeOptional from "../packages/agCascadeOptional/src/index.vue";
import agMultifunctionSearch from "../packages/agMultifunctionSearch/src/index.vue";
import agCascadeOptional from "../packages/agCascadeOptional/src/index.vue";
import agQuery from "../packages/agQuery/src/index.vue";
import agTable from "../packages/agTable/src/index.vue";
import vuedraggable from 'vuedraggable';
import agElemUI from "../packages/index.js";
Vue.use(ElementUI);
Vue.use(agElemUI);
// Vue.use(vuedraggable);
@ -91,16 +92,8 @@ Vue.component('vuedraggable', window.vuedraggable)
export default {
components: {
agDialog,
agDatePicker,
agInput,
agSelect,
agNumberRange,
components: {
agCascadeOptional,
agMultifunctionSearch,
agQuery,
agTable,
vuedraggable
},
data() {
@ -121,6 +114,7 @@ export default {
// }
};
return {
colorvalue:"#ffffff",
ruleForm: {
pass: [],
},
@ -138,6 +132,10 @@ export default {
{date: "2016-05-04", name: "王小虎3", address: "上海市普陀区金沙江路 1518 弄"},
{date: "2016-05-05", name: "王小虎4", address: "上海市普陀区金沙江路 1518 弄"}
],
checklist:[
{label:"方法1",value:"1"},
{label:"方法2",value:"2"}
],
rules: {
pass: [{ validator: validatePass, trigger: "blur" }],
},
@ -472,6 +470,9 @@ export default {
submit() {
this.$refs.ttt.values;
},
onCheckSearch(val){
console.log(val,'onCheckSearch');
},
changes(val) {
console.log(val);
console.log(999);
@ -485,7 +486,7 @@ export default {
<style lang="scss">
body {
background: #918d8d;
background: #f8f8f8;
}
.div {
span {

43798
src/ag-ui.common.js Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,21 +0,0 @@
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import vuedraggable from 'vuedraggable';
import agElemUI from "../packages/index.js";
console.log('main.js', process.env);
Vue.use(ElementUI);
Vue.use(agElemUI);
Vue.use(vuedraggable);
new Vue({
el: '#app',
router,
store,
render: (h) => h(App)
})