liunan #10

Merged
liunan merged 47 commits from liunan into master 2024-09-13 14:43:34 +08:00
6 changed files with 156 additions and 26 deletions
Showing only changes of commit 11f09906cb - Show all commits

View File

@ -6,6 +6,7 @@
v-model="dateArr"
v-bind="attrs"
v-on="Listeners"
:value="value"
:type="datetype"
@mouseenter.native="mousetrue = true"
@mouseleave.native="mousetrue = false"
@ -28,7 +29,9 @@ export default {
default: "date",
},
value: {
default: null||[],
default:()=>{
return null||[]
},
},
},
data() {
@ -59,9 +62,9 @@ export default {
let config = {};
if (this.range) {
config = {
"start-placeholder": "开始日期",
"end-placeholder": "结束日期",
"range-separator": "-",
"start-placeholder":this.$attrs.startplaceholder||"开始日期",
"end-placeholder":this.$attrs.endplaceholder|| "结束日期",
"range-separator":this.$attrs.rangeseparator||"-",
"picker-options": {
disabledDate(time) {
return (
@ -130,7 +133,7 @@ export default {
} else {
config = {
align: "right",
placeholder: "选择日期",
placeholder: this.$attrs.placeholder||"选择日期",
"picker-options": {
disabledDate(time) {
return time.getTime() > Date.now();
@ -174,15 +177,20 @@ export default {
};
},
//
Listeners() {
Listeners() {
return Object.assign({}, this.$listeners, {
input: (value) => {
if (this.range) {
if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
this.$emit("change", [
`${value[0]} 00:00:00`,
if (!isEmpty(value) && value.length === 2 && value[0] && value[1]) {
if(this.showTime){
this.$emit("change", value);
}else{
this.$emit("change", [
`${value[0]} 00:00:00`,
`${value[1]} 23:59:59`,
]);
}
} else {
this.$emit("change", []);
}
@ -192,20 +200,26 @@ export default {
},
});
},
iconClass() {
iconClass() {
return this.mousetrue
? "ag-icon-prefix-hide"
: "ag-icon-prefix-show";
},
},
mounted() {
console.log(this.value,'this.value',this.$attrs);
if (Array.isArray(this.value)&&this.range){
this.dateArr = [this.value[0] || "", this.value[1] || ""];
} else {
this.dateArr = this.value;
}
},
watch: {
value: {
handler(newVal) {
if (Array.isArray(newVal)&&this.range){
const [date1, date2] = newVal.slice(0, 2);
this.dateArr = [date1 || "", date2 || ""];
console.log(newVal,'datevalue');
if (Array.isArray(newVal)&&this.range){
this.dateArr = [newVal[0] || "", newVal[1] || ""];
} else {
this.dateArr = newVal;
}

9
packages/agForm/index.js Normal file
View File

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

View File

@ -0,0 +1,96 @@
<template>
<el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
<el-row>
<el-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.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'"/>
<agSelect v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" />
</slot>
</el-form-item>
</el-col>
</el-row>
<div class="footerbox">
<el-form-item >
<slot name="button" :value="formValue">
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
提交
</el-button>
</slot>
</el-form-item>
</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';
export default{
name:"agForm",
components:{
agInput:agInput,
agDatePicker,
agSelect
},
props:{
data:{
type:Array,
default(){
return []
}
},
span:{
type:Number,
default:24
}
},
data(){
return{
formValue:{
}
}
},
mounted(){
this.formValue=this.$attrs.value;
if(this.$refs.formref){
for(const key in this.$refs.formref){
if(!this[key]&&key!='value'){
this[key]=this.$refs.formref[key];
}
}
}
},
watch:{
data(val){
this.formValue = {};
val.map((h)=>{
if(h.value){
this.formValue[h.enName] = h.value;
}
});
}
},
methods:{
onSubmit(){
console.log(this.formValue,'submit')
this.$emit('submit',this.formValue)
}
},
}
</script>
<style lang="scss" scoped>
.footerbox{
margin-top:12px;
display:flex;
justify-content:center;
.submitbtn{
width:200px;
}
}
</style>

View File

@ -23,14 +23,7 @@ export default {
type: Boolean,
default: false,
},
},
watch:{
$attrs:function(val){
console.log(val,'attrsattrs');
},
},
},
mounted(){
if(this.$refs.apinputref){
for(const key in this.$refs.apinputref){

View File

@ -2,6 +2,7 @@
import agInput from './agInput/index';
import agSelect from './agSelect/index';
import agUpdate from './agUpload';
import agForm from './agForm';
// 注册组件
@ -9,7 +10,8 @@
const components = [
agInput,
agSelect,
agUpdate
agUpdate,
agForm
]
// 定义 install 方法,接收 Vue 作为参数(使用 use 注册插件,那么所有的组件都会被注册)
@ -33,5 +35,6 @@
// 以下是具体的组件列表
agInput,
agSelect,
agUpdate
agUpdate,
agForm
}

View File

@ -50,6 +50,9 @@
<agUpdate @onUpload="onUpload" isDrap dragmove multiple :limit="5" @onError="onError" :maxSize="1024*1024" :fileList="filelist">
<div slot="tip">只能上传jpg/png文件且不超过500kb</div>
</agUpdate>
<ag-form :data="formdata" label-width="80px" label-position="right" v-model="formvalue">
</ag-form>
<!-- <el-input
size="small"
placeholder="请输入内容"
@ -367,7 +370,19 @@ export default {
handleChange: () => {},
},
],
filelist:['https://git.aiguoai.com/assets/img/logo.svg']
filelist:['https://git.aiguoai.com/assets/img/logo.svg'],
formdata:[
{label:"订单编号",span:12,type:"ag-input",enName:'order_sn',value:'656',placeholder:'请输入洗碗机',size:'small',clearable:true,show:true,value:'123',required:true},
{label:"IMEI/机器编号",span:12,type:"ag-input",enName:'imei',value:'43543',placeholder:'请输入IMEI/机器编号',size:'small',clearable:true,show:true},
{label:"质检码",span:12,type:"ag-select",value:'',enName:'ser_sn',placeholder:'请输入质检码',size:'small',clearable:true,show:true,options:[{value:'1',label:'112'},{value:'2',label:'2223'}]},
{label:"质检时间",span:12,type:"ag-date-picker",enName:'time',range:true,showTime:true,startplaceholder:'初始日期1',endplaceholder:'结束日期1',width:200,rangeseparator:'至',placeholder:'请选择日期',filterable:true,size:'small'},
],
formvalue:{
order_sn:'123',
imei:'456',
ser_sn:'1',
time:['2020-12-12 12:33:11','2024-09-11 13:13:13']
}
}
},