This commit is contained in:
ln1778 2024-09-23 09:26:44 +08:00
parent df94b0aa59
commit e742aeae7b
4 changed files with 403 additions and 369 deletions

View File

@ -1,6 +1,6 @@
{
"name": "ag-element-ui",
"version": "0.1.21",
"version": "0.1.22",
"main": "packages/index.js",
"scripts": {
"dev": "vue-cli-service serve",

View File

@ -1,322 +1,322 @@
<template>
<el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
<ag-row>
<ag-col v-for="(item, index) in data" :key="index" :span="item.span || 24">
<el-form-item v-bind="item" :prop="item.enName">
<slot :name="item.soltName" v-if="item.soltName" :row="item" />
<div class="contentbox" v-else>
<ag-input
v-model="formValue[item.enName]"
type="textarea"
v-bind="item"
v-if="item.type == 'ag-textarea'"
size="small"
clearable
></ag-input>
<ag-input
v-model="formValue[item.enName]"
v-bind="item"
v-if="item.type == 'ag-input'"
size="small"
clearable
></ag-input>
<ag-date-picker
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-date-picker'"
size="small"
clearable
/>
<ag-select
v-model="formValue[item.enName]"
v-bind="item"
v-if="item.type == 'ag-select'"
size="small"
clearable
/>
<el-radio-group
v-model="formValue[item.enName]"
v-bind="item"
v-if="item.type == 'ag-radio' && formValue[item.enName]"
size="small"
clearable
<el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
<ag-row>
<ag-col v-for="(item, index) in data" :key="index" :span="item.span || 24">
<el-form-item v-bind="item" :prop="item.enName">
<slot :name="item.soltName" v-if="item.soltName" :row="item" />
<div class="contentbox" v-else>
<ag-input
v-model="formValue[item.enName]"
type="textarea"
v-bind="item"
v-if="item.type == 'ag-textarea'"
size="small"
clearable
></ag-input>
<ag-input
v-model="formValue[item.enName]"
v-bind="item"
v-if="item.type == 'ag-input'"
size="small"
clearable
></ag-input>
<ag-date-picker
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-date-picker'"
size="small"
clearable
/>
<ag-select
v-model="formValue[item.enName]"
v-bind="item"
v-if="item.type == 'ag-select'"
size="small"
clearable
/>
<el-radio-group
v-model="formValue[item.enName]"
v-bind="item"
v-if="item.type == 'ag-radio' && formValue[item.enName]"
size="small"
clearable
>
<el-radio
:label="it.value"
v-for="(it, index) in item.options"
:key="index"
>{{ it.label }}</el-radio
>
<el-radio
:label="it.value"
v-for="(it, index) in item.options"
:key="index"
>{{ it.label }}</el-radio
>
</el-radio-group>
<el-checkbox-group
v-bind="item"
v-if="item.type == 'ag-checkbox' && formValue[item.enName]"
v-model="formValue[item.enName]"
size="small"
clearable
</el-radio-group>
<el-checkbox-group
v-bind="item"
v-if="item.type == 'ag-checkbox' && formValue[item.enName]"
v-model="formValue[item.enName]"
size="small"
clearable
>
<el-checkbox
v-for="(it, index) in item.options"
:label="it.value"
:key="index"
>{{ it.label }}</el-checkbox
>
<el-checkbox
v-for="(it, index) in item.options"
:label="it.value"
:key="index"
>{{ it.label }}</el-checkbox
>
</el-checkbox-group>
<el-input-number
v-model="formValue[item.enName]"
v-bind="item"
v-if="item.type == 'ag-input-number'"
clearable
></el-input-number>
<el-cascader
v-model="formValue[item.enName]"
v-bind="item"
size="small"
v-if="item.type == 'ag-cascader'"
clearable
:style="{ width: '100%' }"
></el-cascader>
<el-switch
v-model="formValue[item.enName]"
v-bind="item"
size="small"
v-if="item.type == 'ag-switch' && formValue[item.enName]"
>
</el-switch>
<el-slider
v-model="formValue[item.enName]"
v-bind="item"
size="small"
v-if="item.type == 'ag-slider'"
></el-slider>
<el-time-select
:style="{ width: '100%' }"
clearable
v-model="formValue[item.enName]"
v-bind="item"
size="small"
v-if="item.type == 'ag-time-select'"
:picker-options="item.options"
>
</el-time-select>
<ag-upload
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-upload'"
@onError="$listeners.onError"
clear
isPre
></ag-upload>
<el-rate
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-rate'"
size="small"
></el-rate>
<agColorPicker
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-color-picker'"
size="small"
>
</agColorPicker>
<el-transfer
:data="item.data"
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-transfer'"
size="small"
></el-transfer>
<agNumberRange
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-numberRange'"
size="small"
clearable
/>
<ag-multion-input
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-multion-input'"
size="small"
clearable
/>
<agQuery
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-query'"
size="small"
clearable
/>
<ag-mution-checkbox
:datas="item.datas"
v-bind="item"
:placeholder="item.placeholder"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-mution-checkbox'"
size="small"
>
</ag-mution-checkbox>
<ag-multion-date-picker
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-multion-datte-picker'"
size="small"
/>
</div>
<div v-if="item.tip" class="tipbox">
<slot name="tip" :row="item"> {{ item.tip }}</slot>
</div>
</el-form-item>
</ag-col>
</ag-row>
<div class="footerbox" v-if="$listeners.onSubmit">
<slot name="button" :value="formValue">
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
{{ submittitle || "提交" }}
</el-button>
</slot>
</div>
</el-form>
</template>
<script>
import agInput from "./../../agInput/src/index.vue";
import agDatePicker from "./../../agDatePicker/src/index.vue";
import agSelect from "./../../agSelect/src/index.vue";
import agRow from "./../../agRow/src/index.vue";
import agCol from "./../../agCol/src/index.vue";
import agUpload from "./../../agUpload/src/index.vue";
import agColorPicker from "./../../agColorPicker/src/index.vue";
import agNumberRange from "./../../agNumberRange/src/index.vue";
import agMultionInput from "./../../agMultionInput/src/index.vue";
import agQuery from "./../../agQuery/src/index.vue";
import agMultionDatePicker from "../../agMultionDatePicker";
export default {
name: "agForm",
components: {
agMultionDatePicker,
agInput: agInput,
agDatePicker,
agSelect,
agRow,
agCol,
agUpload: agUpload,
agColorPicker,
agNumberRange,
agMultionInput,
agQuery,
</el-checkbox-group>
<el-input-number
v-model="formValue[item.enName]"
v-bind="item"
v-if="item.type == 'ag-input-number'"
clearable
></el-input-number>
<el-cascader
v-model="formValue[item.enName]"
v-bind="item"
size="small"
v-if="item.type == 'ag-cascader'"
clearable
:style="{ width: '100%' }"
></el-cascader>
<el-switch
v-model="formValue[item.enName]"
v-bind="item"
size="small"
v-if="item.type == 'ag-switch' && formValue[item.enName]"
>
</el-switch>
<el-slider
v-model="formValue[item.enName]"
v-bind="item"
size="small"
v-if="item.type == 'ag-slider'"
></el-slider>
<el-time-select
:style="{ width: '100%' }"
clearable
v-model="formValue[item.enName]"
v-bind="item"
size="small"
v-if="item.type == 'ag-time-select'"
:picker-options="item.options"
>
</el-time-select>
<ag-upload
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-upload'"
@onError="$listeners.onError"
clear
isPre
@onUpload="item.onUpload"
></ag-upload>
<el-rate
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-rate'"
size="small"
></el-rate>
<agColorPicker
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-color-picker'"
size="small"
>
</agColorPicker>
<el-transfer
:data="item.data"
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-transfer'"
size="small"
></el-transfer>
<agNumberRange
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-numberRange'"
size="small"
clearable
/>
<ag-multion-input
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-multion-input'"
size="small"
clearable
/>
<agQuery
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-query'"
size="small"
clearable
/>
<ag-mution-checkbox
:datas="item.datas"
v-bind="item"
:placeholder="item.placeholder"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-mution-checkbox'"
size="small"
>
</ag-mution-checkbox>
<ag-multion-date-picker
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-multion-datte-picker'"
size="small"
/>
</div>
<div v-if="item.tip" class="tipbox">
<slot name="tip" :row="item"> {{ item.tip }}</slot>
</div>
</el-form-item>
</ag-col>
</ag-row>
<div class="footerbox" v-if="$listeners.onSubmit">
<slot name="button" :value="formValue">
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
{{ submittitle || "提交" }}
</el-button>
</slot>
</div>
</el-form>
</template>
<script>
import agInput from "./../../agInput/src/index.vue";
import agDatePicker from "./../../agDatePicker/src/index.vue";
import agSelect from "./../../agSelect/src/index.vue";
import agRow from "./../../agRow/src/index.vue";
import agCol from "./../../agCol/src/index.vue";
import agUpload from "./../../agUpload/src/index.vue";
import agColorPicker from "./../../agColorPicker/src/index.vue";
import agNumberRange from "./../../agNumberRange/src/index.vue";
import agMultionInput from "./../../agMultionInput/src/index.vue";
import agQuery from "./../../agQuery/src/index.vue";
import agMultionDatePicker from "../../agMultionDatePicker";
export default {
name: "agForm",
components: {
agMultionDatePicker,
agInput: agInput,
agDatePicker,
agSelect,
agRow,
agCol,
agUpload: agUpload,
agColorPicker,
agNumberRange,
agMultionInput,
agQuery,
},
props: {
submittitle: {
type: String,
default: "提交",
},
props: {
submittitle: {
type: String,
default: "提交",
},
data: {
type: Array,
default() {
return [];
},
},
span: {
type: Number,
default: 24,
data: {
type: Array,
default() {
return [];
},
},
data() {
return {
formValue: {},
};
span: {
type: Number,
default: 24,
},
mounted() {
this.formValue = this.$attrs.value;
},
data() {
return {
formValue: {},
};
},
mounted() {
this.formValue = this.$attrs.value;
setTimeout(() => {
this.$refs.formref.clearValidate();
}, 1);
if (this.$refs.formref) {
for (const key in this.$refs.formref) {
if (!this[key] && key != "value") {
this[key] = this.$refs.formref[key];
}
}
}
},
watch: {
value(val) {
this.formValue = val;
setTimeout(() => {
this.$refs.formref.clearValidate();
}, 1);
if (this.$refs.formref) {
for (const key in this.$refs.formref) {
if (!this[key] && key != "value") {
this[key] = this.$refs.formref[key];
}
}
}
},
watch: {
value(val) {
this.formValue = val;
setTimeout(() => {
this.$refs.formref.clearValidate();
}, 1);
},
},
methods: {
onSubmit() {
this.$emit("onSubmit", this.formValue);
},
methods: {
onSubmit() {
this.$emit("onSubmit", this.formValue);
},
},
};
</script>
<style lang="scss" scoped>
.footerbox {
margin-top: 12px;
display: flex;
justify-content: center;
.submitbtn {
width: 200px;
}
},
};
</script>
<style lang="scss" scoped>
.footerbox {
margin-top: 12px;
display: flex;
justify-content: center;
.submitbtn {
width: 200px;
}
}
.el-form--inline {
.el-form-item {
display: flex;
}
.el-form-item__content {
flex: 1;
width: 100%;
}
}
.contentbox {
width: 100%;
display: flex;
align-items: stretch;
}
.flexcenter {
display: flex;
align-items: stretch;
}
.tipbox {
width: 100%;
color: red;
}
::v-deep {
.el-form--inline {
.el-form-item {
display: flex;
}
.el-form-item__content {
flex: 1;
width: 100%;
}
}
.contentbox {
width: 100%;
display: flex;
align-items: stretch;
}
.flexcenter {
display: flex;
align-items: stretch;
}
.tipbox {
width: 100%;
color: red;
}
::v-deep {
.el-form--inline {
.el-form-item {
display: flex;
}
.el-form-item__content {
display: flex;
flex: 1;
width: 100%;
flex-wrap: wrap;
margin-left: 0;
}
}
.el-form-item {
width: 100%;
margin-bottom: 12px;
}
.el-form-item__content {
flex: 1;
display: flex;
flex: 1;
width: 100%;
flex-wrap: wrap;
width: 100%;
margin-left: 0 !important;
}
.el-radio-button__inner,
.el-radio-group {
display: flex;
align-items: center;
margin-left: 0;
}
}
</style>
.el-form-item {
width: 100%;
margin-bottom: 12px;
}
.el-form-item__content {
flex: 1;
display: flex;
flex-wrap: wrap;
width: 100%;
margin-left: 0 !important;
}
.el-radio-button__inner,
.el-radio-group {
display: flex;
align-items: center;
}
}
</style>

View File

@ -1,21 +1,20 @@
<template>
<el-select
class="ag_select"
:style="{ width: `100%` }"
:value="selectValue"
ref="apselectref"
:size="$attrs.size||'small'"
v-bind="$attrs"
v-on="$listeners"
>
<slot v-for="(_,name) in $slots" :name="name" :slot="name"> </slot>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-select
class="ag_select"
:style="{ width: `100%` }"
ref="apselectref"
:size="$attrs.size || 'small'"
v-bind="$attrs"
v-on="$listeners"
>
<slot v-for="(_, name) in $slots" :name="name" :slot="name"> </slot>
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</template>
<script>
@ -24,56 +23,36 @@ export default {
props: {
width: {
type: Number,
default:0,
default: 0,
},
options: {
type: Array,
default: () => {
return [];
},
},
value:{
default: () =>'',
}
},
data() {
return {
selectValue:""
};
},
mounted(){
if(this.$refs.apselectref){
for(const key in this.$refs.apselectref){
if(!this[key]&&key!='value'){
this[key]=this.$refs.apselectref[key];
}
}
}
},
watch: {
value: {
handler(newVal) {
let newselectValue=newVal;
const find=this.options.find((f)=>f.value==newselectValue);
if(find){
this.selectValue=newselectValue;
}else{
this.selectValue="";
}
},
immediate: true,
},
},
methods: {
},
data() {
return {};
},
mounted() {
if (this.$refs.apselectref) {
for (const key in this.$refs.apselectref) {
if (!this[key] && key != "value") {
this[key] = this.$refs.apselectref[key];
}
}
}
},
};
</script>
<style lang="scss" scoped>
::v-deep {
.ag_select{
.ag_select {
min-width: 90px;
width:100%;
width: 100%;
}
.el-input__icon {
font-size: 16px !important;

View File

@ -2,13 +2,18 @@
<div class="uploadbox">
<div
class="uploadimgbox"
:style="{ height: width + 'px' }"
:style="{
height: $attrs.height ? $attrs.height + 'px' : width + 'px',
}"
v-if="listType == 'picture-card'"
>
<div
v-for="(img, index) in imageList"
:key="index"
:style="{ width: width + 'px' }"
:style="{
width: width + 'px',
height: $attrs.height ? $attrs.height + 'px' : width + 'px',
}"
:draggable="dragmove"
class="imgitem"
:class="dragmove && dragmoveclass"
@ -19,7 +24,11 @@
@dragleave="onMouseup"
>
<slot name="file" :file="img">
<img :src="img.url" class="img" v-if="img.type.indexOf('image') > -1" />
<img
:src="img.url || img"
class="img"
v-if="(img.type && img.type.indexOf('image') > -1) || img != ''"
/>
<div
v-if="
$attrs.masktext &&
@ -45,7 +54,7 @@
></i>
<i
class="el-icon-delete"
v-if="clear"
v-if="clear && !disabled"
@click="handleRemove(img.raw, index)"
></i>
</div>
@ -53,7 +62,11 @@
</div>
<div
class="uploadcontain"
:style="{ height: width + 'px', aspectRatio: isDrap ? 4 / 3 : 1 / 1 }"
:style="{
height: $attrs.height ? $attrs.height + 'px' : width + 'px',
aspectRatio: isDrap ? 4 / 3 : 1 / 1,
width: width + 'px',
}"
:draggable="isDrap"
@dragover.prevent
@dragenter.prevent
@ -83,7 +96,7 @@
>
<label for="uploadinput" class="uploadlabel" @click="onInputClick">
<slot>
<el-button type="primary" size="small"
<el-button type="primary" size="small" :disabled="disabled"
><i
class="el-icon-plus"
:style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
@ -133,6 +146,7 @@
</span>
</slot>
<el-popconfirm
v-if="!disabled"
:title="`确定移除${img.name}吗?`"
@confirm="handleRemove(img.raw, index)"
>
@ -148,6 +162,7 @@
:multiple="limit > 1 && $attrs.multiple"
:accept="$attrs.accept"
id="uploadinput"
:disabled="disabled"
@change="onUpdate"
ref="fileinputref"
/>
@ -185,7 +200,10 @@ export default {
type: Number,
default: 1,
},
disabled: {
type: Boolean,
default: false,
},
fileList: {
type: Array,
default() {
@ -279,6 +297,9 @@ export default {
},
methods: {
handleRemove(file, index) {
if (this.disabled) {
return;
}
this.imageList = this.imageList.filter((item, inkey) => {
return inkey !== index;
});
@ -291,6 +312,9 @@ export default {
}
},
onUpdate(e) {
if (this.disabled) {
return;
}
if (this.limit <= this.imageList.length) {
return;
}
@ -301,11 +325,23 @@ export default {
const find = files.find((f, i) => {
if (this.$attrs.accept) {
let acceptarr = this.$attrs.accept.split(",");
if (!acceptarr.includes(f.type)) {
if (this.$listeners.onError) {
this.$emit("onError", `其中第${i + 1}张文件类型错误`);
for (let i = 0; i < acceptarr.length; i++) {
let item = acceptarr[i];
if (item.includes("*")) {
if (!item.includes(f.type.split("/")[0])) {
if (this.$listeners.onError) {
this.$emit("onError", `其中第${i + 1}张文件类型错误`);
}
return true;
}
} else {
if (!acceptarr.includes(f.type)) {
if (this.$listeners.onError) {
this.$emit("onError", `其中第${i + 1}张文件类型错误`);
}
return true;
}
}
return true;
}
}
if (this.$attrs.maxSize) {
@ -325,7 +361,7 @@ export default {
}
files.map((item, index) => {
if (item.type.indexOf("image") > -1) {
if (item.type && item.type.indexOf("image") > -1) {
let filerender = new FileReader();
filerender.onload = function (e) {
if (that.$attrs.minWidth || that.$attrs.minHeight) {
@ -360,8 +396,8 @@ export default {
msg: "",
});
if (files.length == uplist.length) {
this.$refs.fileinputref.value = "";
if (this.$listeners.onUpload) {
this.fileList.push(...uplist);
this.$emit("onUpload", this.fileList, uplist);
} else {
this.imageList.push(...uplist);
@ -410,14 +446,15 @@ export default {
}
});
} catch (err) {
console.log(err, "uploaderr");
if (this.$listeners.onError) {
this.$emit("onError", e);
}
}
},
onDragstart(e) {
if (this.disabled) {
return;
}
this.sourceNode = e.target;
this.partNode = e.target.parentNode;
e.target.classList.add("tabsbg");
@ -428,6 +465,9 @@ export default {
},
onDragenter(e) {
e.preventDefault();
if (this.disabled) {
return;
}
if (!this.dragmove) {
return;
}
@ -453,12 +493,18 @@ export default {
},
onDragover(e) {
e.preventDefault();
if (this.disabled) {
return;
}
},
onMouseup(e) {
e.preventDefault();
if (!this.dragmove) {
return;
}
if (this.disabled) {
return;
}
if (this.partNode === e.target || e.target === this.sourceNode) {
return;
}
@ -469,6 +515,9 @@ export default {
if (!this.dragmove) {
return;
}
if (this.disabled) {
return;
}
e.target.classList.remove("moving");
e.target.classList.remove("tabsbg");
this.sourceNode.classList.remove("moving");
@ -489,12 +538,18 @@ export default {
if (this.drap) {
return;
}
if (this.disabled) {
return;
}
const files = event.dataTransfer.files;
this.onUpdate({ target: { files: files } });
},
onInputClick(e) {
e.preventDefault(); //
e.stopPropagation(); //
if (this.disabled) {
return;
}
this.$refs.fileinputref.click();
},
},